คำอธิบายรูปแบบภาพ: JPEG, PNG, WebP, GIF, SVG, AVIF

คำตอบสั้น ๆ: คุณควรใช้รูปแบบใด?

จับคู่รูปแบบให้เข้ากับเนื้อหาของภาพและสถานที่ที่แสดงผล:

สำหรับรายละเอียดการเปรียบเทียบรูปแบบต่อรูปแบบ ดูได้ที่ AVIF vs WebP vs JPEG comparison.

การเปรียบเทียบรูปแบบไฟล์อย่างไร?

ความแตกต่างของขนาดไฟล์มีมากและสม่ำเสมอ เมื่อวัดจากภาพถ่ายขนาด 1400×933:

ขนาด 853 KB ของ PNG โดดเด่นมาก: การจัดเก็บภาพถ่ายแบบ lossless มีราคาสูงกว่า JPEG ประมาณ 8 เท่า และสูงกว่า AVIF ถึง 19 เท่า นั่นคือเหตุผลที่ว่าทำไม PNG จึงไม่เหมาะกับภาพถ่ายทั้งหน้า แม้ว่าในทางเทคนิคแล้วมันจะสามารถจัดเก็บได้ก็ตาม

JPEG — ม้างานสำหรับภาพถ่าย

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

• ดีที่สุดสำหรับ: ภาพถ่าย, gradients, ฉากโลกจริงที่ซับซ้อน
• ควรหลีกเลี่ยงสำหรับ: ข้อความ, ภาพหน้าจอ UI, งานศิลปะลายเส้นคมชัด, สิ่งใดก็ตามที่ต้องการความโปร่งใส (JPEG ไม่มี alpha channel)
• ระวัง: artifact แบบบล็อก 8×8 ที่มองเห็นได้เมื่อคุณภาพต่ำกว่า ~70

ใช้คุณภาพ 80–85 สำหรับภาพถ่ายบนเว็บ ดูที่ วิธีบีบอัด JPEG

PNG — ขอบคมและความโปร่งใส

PNG เป็นแบบ lossless และรองรับ full alpha channel จึงสามารถเก็บรักษาทุก pixel และความโปร่งใสใด ๆ ได้ ข้อแลกเปลี่ยนคือขนาดไฟล์: มันไม่ได้บีบอัดภาพถ่ายได้ดี

• เหมาะสำหรับ: กราฟิกที่มีขอบคม ข้อความ โลโก้ ภาพหน้าจอ UI และภาพโปร่งใส
• ควรหลีกเลี่ยงสำหรับ: ภาพถ่ายเต็มหน้า (ให้ใช้ WebP/AVIF/JPEG แทน — ดูตารางด้านบน)
• ระวังสำหรับ: ไฟล์ขนาดใหญ่บนภาพถ่าย ลดขนาดด้วย PNG-8 (≤256 colors) สำหรับกราฟิกแบบเรียบ

สำหรับรายละเอียดเกี่ยวกับความโปร่งใส ดูได้ที่ วิธีสร้างภาพโปร่งใส.

WebP — ค่าเริ่มต้นของเว็บยุคใหม่

WebP (2010) รองรับทั้งแบบ lossy และ lossless, รองรับ alpha, และเหนือกว่า JPEG ประมาณ 25–35% ที่คุณภาพเทียบเท่า การรองรับในเบราว์เซอร์สมัยใหม่อยู่ที่ประมาณ ~98%.

• เหมาะสำหรับ: ภาพถ่ายบนเว็บและภาพเว็บโปร่งใสที่ทุกไบต์มีความสำคัญ
• ควรหลีกเลี่ยงสำหรับ: อีเมลและไคลเอนต์ที่เก่ามาก (ใช้ JPEG/PNG เป็น fallback)
• ควรใช้ร่วมกับ: การสำรองข้อมูลด้วย JPEG/PNG ในองค์ประกอบ <picture>

AVIF — รูปภาพที่เล็กที่สุด

AVIF (2019) ใช้เครื่องมือ intra-frame ของ video codec ตัว AV1 และดีกว่า WebP อีก 20–30% การรองรับอยู่ที่ประมาณ ~96% และกำลังเพิ่มขึ้น

• เหมาะสำหรับ: ภาพถ่ายที่แม้แต่ไบต์ที่เล็กที่สุดก็มีความสำคัญ (hero images, LCP).
• ควรหลีกเลี่ยง: เมื่อคุณไม่สามารถทนต่อการเข้ารหัสที่ช้าได้ หรือสำหรับเบราว์เซอร์รุ่นเก่ามาก (ใช้ fallback ของ <picture>).
• ระวัง: การเลอะเทอะของพื้นผิวที่ละเอียดเมื่ออยู่ในคุณภาพต่ำมาก (<q40).

SVG — เวกเตอร์ที่ปรับขนาดได้

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

• เหมาะสำหรับ: โลโก้ ไอคอน ภาพประกอบง่ายๆ และสิ่งใดก็ตามที่ต้องปรับขนาดได้
• ควรหลีกเลี่ยงสำหรับ: ภาพถ่าย (SVG ไม่สามารถแสดงภาพเหล่านี้ได้อย่างมีประสิทธิภาพ)
• ควรระวัง: ความซับซ้อน — SVG ที่มีรายละเอียดสูงอาจมีขนาดใหญ่; ให้แปลงเป็นแรสเตอร์หากจำเป็น

GIF — มรดกด้านแอนิเมชัน

GIF ทำงานแบบแอนิเมชันและรองรับความโปร่งใส 1-bit แต่มีข้อจำกัดที่ 256 สี และมีขนาดใหญ่กว่ารูปแบบแอนิเมชันสมัยใหม่สำหรับเนื้อหาเดียวกันมาก

• เหมาะสำหรับ: ไม่มีอะไรที่ทันสมัยแล้ว — ควรแทนที่ด้วย WebP หรือ AVIF แบบแอนิเมชัน
• หลีกเลี่ยงสำหรับ: สิ่งใดก็ตามที่ต้องใช้สีอย่างเคร่งครัด (จำกัด 256 สี) หรือมีความอ่อนไหวต่อขนาด
• ระวัง: ไฟล์ขนาดใหญ่; GIF ความยาว 3 วินาที มักจะมีขนาดใหญ่กว่าไฟล์ MP4 ของคลิปเดียวกัน

คุณจะเลือกอย่างไรเมื่ออยู่ภายใต้ความกดดัน?

ใช้ขั้นตอนการตัดสินใจสั้นๆ นี้:

1. เป็นภาพถ่ายหรือไม่? → WebP/AVIF (พร้อมตัวสำรองเป็น JPEG).
2. ต้องการความโปร่งใสหรือไม่? → PNG หรือ WebP (alpha).
3. เป็นโลโก้/ไอคอน/ภาพประกอบที่สามารถปรับขนาดได้หรือไม่? → SVG.
4. เป็นข้อความ/UI ที่คมชัดหรือไม่? → PNG.
5. เป็นแอนิเมชันหรือไม่? → WebP/AVIF แบบเคลื่อนไหว ไม่ใช่ GIF.
6. สำหรับอีเมลหรือไม่? → JPEG หรือ PNG (ไม่มี WebP/AVIF).

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

คุณจะให้บริการหลายรูปแบบได้อย่างไร?

ใช้ element <picture> เพื่อให้เบราว์เซอร์แต่ละตัวได้รับรูปแบบที่ดีที่สุดที่มันรองรับ:

เบราว์เซอร์จะเลือกประเภทแรกที่มันรองรับและเพิกเฉยต่อส่วนที่เหลือ ควรมีแท็ก <img> ที่ใช้ src ของ JPEG เสมอ เพื่อเป็นทางเลือกสำรองสุดท้าย ดู คู่มือรูปแบบรูปภาพบน MDN สำหรับตารางการรองรับต่อเบราว์เซอร์ในปัจจุบัน

ข้อผิดพลาดทั่วไป

• การใช้ PNG สำหรับภาพถ่าย มันใช้งานได้ แต่ไฟล์มีขนาดใหญ่กว่าที่จำเป็นถึง 8–19×
• การใช้ JPEG สำหรับข้อความหรือโลโก้ การบีบอัดจะทำให้ขอบคมเบลอ ควรใช้ PNG หรือ SVG แทน
• การให้บริการเพียงรูปแบบเดียวโดยไม่มีตัวสำรอง (fallback) AVIF/WebP ต้องการการสำรองด้วย JPEG สำหรับไคลเอนต์รุ่นเก่า
• การทำแอนิเมชันด้วย GIF Animated WebP/AVIF มีขนาดเล็กกว่ามากและรองรับสีได้มากกว่า
• การละเลย SVG สำหรับโลโก้ โลโก้ที่แปลงเป็นราสเตอร์จะเบลอเมื่อใช้ DPI สูง; SVG ยังคงคมชัดในทุกขนาด

คำถามที่พบบ่อย

ฉันควรใช้รูปแบบภาพใดดี?

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

WebP ดีกว่า JPEG หรือไม่?

สำหรับการส่งมอบบนเว็บ ใช่ — WebP มีขนาดเล็กกว่า 25 ถึง 35 เปอร์เซ็นต์ที่คุณภาพเท่ากันและรองรับในเบราว์เซอร์ปัจจุบันทั้งหมด ควรเก็บ JPEG ไว้เป็นทางเลือกสำรองสำหรับเบราว์เซอร์รุ่นเก่ามากเท่านั้น ดูคู่มือ WebP converter guide

เมื่อไหร่ที่ฉันควรใช้ AVIF?

เมื่อคุณสามารถเข้ารหัสได้และกลุ่มเป้าหมายของคุณส่วนใหญ่อยู่บนเบราว์เซอร์สมัยใหม่ — AVIF มีขนาดเล็กกว่า JPEG ประมาณ 50 เปอร์เซ็นต์ ข้อแลกเปลี่ยนคือการเข้ารหัสที่ช้าลงและความไม่สมบูรณ์ในเบราว์เซอร์รุ่นเก่า ควรส่งมอบ AVIF พร้อมด้วย WebP fallback ผ่านองค์ประกอบ <picture>

PNG รองรับความโปร่งใสหรือไม่?

ใช่ — PNG มี alpha channel เต็มรูปแบบ ซึ่งเป็นเหตุผลที่มันเป็นรูปแบบสำหรับกราฟิกและโลโก้ที่มีความโปร่งใส JPEG ไม่รองรับความโปร่งใส WebP และ AVIF ก็รองรับ alpha เช่นกัน แต่มีขนาดเล็กกว่าสำหรับการส่งมอบบนเว็บ

รูปแบบใดที่เล็กที่สุดสำหรับรูปถ่าย?

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

รูปแบบภาพที่เล็กที่สุดคืออะไร?

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

ความแตกต่างระหว่าง lossy และ lossless คืออะไร?

Lossless (PNG, lossless WebP) รักษาทุกพิกเซลไว้ได้อย่างแม่นยำและสามารถย้อนกลับได้อย่างสมบูรณ์ — ไม่มีการสูญเสียคุณภาพใด ๆ Lossy (JPEG, lossy WebP, AVIF) จะทิ้งรายละเอียดที่ตาเห็นได้ยากที่สุดเพื่อลดขนาดไฟล์ และการสูญเสียนั้นถาวร Lossy ชนะในเรื่องขนาดสำหรับรูปถ่าย; lossless ชนะในเรื่องคุณภาพสำหรับกราฟิก ข้อความ และต้นฉบับที่คุณจะนำไปแก้ไขใหม่ เลือกตามเนื้อหา

รูปแบบใดที่เล็กที่สุดสำหรับกราฟิกที่มีความโปร่งใส?

WebP หรือ AVIF ซึ่งทั้งคู่รองรับ alpha channel และบีบอัดได้เล็กกว่า PNG มาก สำหรับโลโก้และไอคอนบนเบราว์เซอร์สมัยใหม่ WebP หรือ AVIF ช่วยลดขนาดไฟล์ได้อย่างมากเมื่อเทียบกับ PNG ในขณะที่ยังคงรักษาความโปร่งใสไว้ ให้บริการพร้อมด้วย PNG fallback ผ่านองค์ประกอบ <picture> สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่มีการรองรับ

เครดิตรูปภาพ

• แผนภูมิแท่งเปรียบเทียบขนาดไฟล์และ Format size comparison — สร้างโดยผู้เขียนจากภาพถ่ายสไตล์อีคอมเมิร์ซ (Pexels #16675632, photo by Mikael Blomkvist) เพื่อแสดงขนาดไฟล์ที่วัดได้จริงในรูปแบบ PNG, JPEG, WebP, และ AVIF

ตัวอย่างโค้ดที่เก็บรักษาไว้

<picture>
  <source srcset="/img/photo.avif" type="image/avif">
  <source srcset="/img/photo.webp" type="image/webp">
  <img src="/img/photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</picture>