ทุกฟอร์แมตรูปคือชุดของการแลกเปลี่ยนระหว่างขนาดไฟล์ คุณภาพ และคุณสมบัติอย่างความโปร่งใสหรือภาพเคลื่อนไหว เลือกผิดคุณก็จะได้ไฟล์อ้วน ข้อความเบลอ หรือกราฟิกที่ไม่ยอมแสดงผล นี่คือแต่ละฟอร์แมตทั่วไปแบบพูดกันตรง ๆ ตามด้วยตารางที่คุณเก็บไว้ใกล้มือได้

สองตระกูลใหญ่

อธิบายฟอร์แมตไฟล์รูปภาพ — PNG, JPG, WebP, AVIF, GIF, SVG — visual 1
สองตระกูลใหญ่

ก่อนจะถึงแต่ละฟอร์แมต มีความแตกต่างหนึ่งที่อธิบายพวกมันส่วนใหญ่ได้

  • แรสเตอร์ (Raster) คือกริดของพิกเซล ภาพถ่ายเป็นแรสเตอร์ ซูมเข้าไปมากพอคุณจะเห็นสี่เหลี่ยม PNG, JPG, WebP, AVIF และ GIF ล้วนเป็นแรสเตอร์
  • เวกเตอร์ (Vector) คือคณิตศาสตร์ เส้น เส้นโค้ง และรูปทรงที่นิยามด้วยพิกัด มันขยายได้ทุกขนาดโดยไม่เบลอ SVG คือฟอร์แมตเวกเตอร์บนเว็บ

อีกแนวคิดสำคัญคือ สูญเสีย (lossy) กับไม่สูญเสีย (lossless) ฟอร์แมตแบบสูญเสีย (JPG โดยปกติ AVIF/WebP) ทิ้งรายละเอียดบางส่วนเพื่อหดไฟล์ ฟอร์แมตแบบไม่สูญเสีย (PNG, GIF, WebP แบบ lossless) เก็บทุกพิกเซลไว้เป๊ะ

แต่ละฟอร์แมต ทีละตัว

อธิบายฟอร์แมตไฟล์รูปภาพ — PNG, JPG, WebP, AVIF, GIF, SVG — visual 2
แต่ละฟอร์แมต ทีละตัว

JPG (JPEG) ตัวหลักสำหรับภาพถ่าย เป็นแบบสูญเสีย ขนาดเล็ก และอ่านได้ทุกที่จริง ๆ ไม่มีความโปร่งใส ไม่มีภาพเคลื่อนไหว การบันทึกซ้ำ ๆ ค่อย ๆ ทำให้มันเสื่อม ใช้กับภาพถ่ายและทุกที่ที่ต้องการความเข้ากันได้สูงสุด

PNG แบบไม่สูญเสีย รองรับความโปร่งใส ตัวเลือกที่ถูกสำหรับภาพหน้าจอ โลโก้ ไอคอน และไดอะแกรม อะไรก็ตามที่มีข้อความหรือขอบคม ภาพถ่ายในรูปแบบ PNG จะใหญ่ ดังนั้นอย่าใช้มันกับภาพถ่าย

WebP ฟอร์แมตสมัยใหม่ที่ทำได้ทั้งสองงาน โหมดสูญเสียเอาชนะ JPG เรื่องขนาด (เล็กกว่า ~25–35%) โหมดไม่สูญเสียรองรับความโปร่งใสและยังกะทัดรัด รองรับภาพเคลื่อนไหวด้วย ตอนนี้เบราว์เซอร์รองรับกันทั่ว เหมาะสำหรับเว็บ ไม่เหมาะเท่ากับอีเมลหรือซอฟต์แวร์รุ่นเก่า

AVIF ตัวบีบอัดใหม่ที่สุดและดีที่สุดตรงนี้ ขนาดราวครึ่งหนึ่งของ JPEG ที่คุณภาพใกล้เคียงกัน พร้อมความโปร่งใสและ HDR เบราว์เซอร์ แสดงผล มันได้ดี แต่ เข้ารหัส มันจากแคนวาสได้ไม่น่าเชื่อถือ เครื่องมือในเบราว์เซอร์จึงถอยกลับไปใช้ WebP เมื่อคุณขอ AVIF การเข้ารหัส AVIF ของจริงต้องใช้เซิร์ฟเวอร์หรือแอปเนทีฟ

GIF เก่า จำกัดที่ 256 สี แต่คลาสสิกสำหรับภาพเคลื่อนไหวง่าย ๆ สำหรับอะไรที่มากกว่าลูปสั้น ๆ WebP (หรือวิดีโอ) จะเล็กและคมกว่า โอเคสำหรับไอคอนเคลื่อนไหวจิ๋ว ๆ แย่สำหรับภาพถ่าย

SVG เวกเตอร์ จึงขยายได้ไม่สิ้นสุดโดยไม่เบลอและยังเล็กจิ๋วสำหรับกราฟิกง่าย ๆ เพอร์เฟกต์สำหรับโลโก้ ไอคอน และภาพประกอบ มันคือโค้ด ไม่ใช่พิกเซล จึงแทนภาพถ่ายไม่ได้

ตารางเปรียบเทียบ

ฟอร์แมต ชนิด การบีบอัด ความโปร่งใส ภาพเคลื่อนไหว เหมาะกับ
JPG แรสเตอร์ สูญเสีย ไม่มี ไม่มี ภาพถ่าย ความเข้ากันได้สูงสุด
PNG แรสเตอร์ ไม่สูญเสีย มี ไม่มี ภาพหน้าจอ โลโก้ ข้อความ
WebP แรสเตอร์ ทั้งสองแบบ มี มี รูปเว็บ เล็ก + อัลฟา
AVIF แรสเตอร์ สูญเสีย/ไม่สูญเสีย มี มี บีบอัดสูงสุด (ฝั่งเซิร์ฟเวอร์)
GIF แรสเตอร์ ไม่สูญเสีย 1-bit เท่านั้น มี ภาพเคลื่อนไหวง่าย ๆ
SVG เวกเตอร์ ไม่มี มี มี (ด้วย CSS/JS) โลโก้ ไอคอน ภาพประกอบ

วิธีเลือกแบบเร็ว ๆ

  • ภาพถ่าย? JPG เพื่อความเข้ากันได้ WebP สำหรับเว็บ
  • ภาพหน้าจอ โลโก้ หรือข้อความ? PNG (แรสเตอร์) หรือ SVG (ถ้าเป็นกราฟิกเวกเตอร์แท้)
  • ต้องการความโปร่งใส? PNG, WebP, AVIF หรือ SVG ไม่มีทางเป็น JPG
  • ภาพเคลื่อนไหว? WebP เพื่อคุณภาพและขนาด GIF เฉพาะกรณีความง่ายแบบเก่า
  • เผยแพร่ขึ้นเว็บไซต์? WebP มักเป็นค่าเริ่มต้นที่ฉลาด

การแปลงระหว่างกัน

เมื่อคุณมีฟอร์แมตผิด คุณไม่ต้องอัปโหลดอะไรเพื่อแก้ เครื่องมือแปลงรูป สลับระหว่าง PNG, JPG และ WebP ในเบราว์เซอร์ของคุณโดยตรงด้วย Canvas ไม่ต้องมีบัญชี ไม่มีการส่งข้อมูลออก และทำงานออฟไลน์ได้หลังเข้าครั้งแรก มันจัดการเป็นชุดได้ และถ้าคุณขอ AVIF มันจะถอยกลับไปใช้ WebP (เล็กกว่า JPG/PNG และรองรับทุกที่) เพราะเบราว์เซอร์เข้ารหัส AVIF ได้ไม่น่าเชื่อถือ

จำตารางข้างบนไว้ แล้วการเลือกฟอร์แมตจะเลิกเป็นการเดา จับคู่ฟอร์แมตกับ เนื้อหา (ภาพถ่ายกับกราฟิก) แล้วจับคู่กับ ปลายทาง (เว็บ อีเมล งานพิมพ์) แล้วคุณจะเลือกได้ถูกต้องเกือบทุกครั้ง