เปรียบเทียบรูปแบบภาพ: JPEG, PNG, WebP และ AVIF
สี่รูปแบบครอบคลุมรูปบนเว็บสมัยใหม่มากกว่า 99% แต่ละแบบแลกเปลี่ยนเรื่องการบีบอัด ความโปร่งใส แอนิเมชันและการรองรับต่างกัน นี่คือคู่มือปฏิบัติในการเลือก
เปรียบเทียบเคียงข้าง
ภาพรวมสั้นๆ ก่อน แล้วจึงรายละเอียดแต่ละรูปแบบด้านล่าง
| คุณสมบัติ | JPEG ? | PNG ? | WebP ? | AVIF ? |
|---|---|---|---|---|
| การบีบอัด | สูญเสียคุณภาพ | ไม่สูญเสีย | สูญเสีย + ไม่สูญเสีย | สูญเสีย + ไม่สูญเสีย |
| อัลฟา (โปร่งใส) | ไม่มี | มี (8 บิต) | มี (8 บิต) | มี (เต็ม) |
| แอนิเมชัน | ไม่มี | เฉพาะ APNG | มี | มี |
| บิตลึกสูงสุด | 8 บิต | 16 บิต | 8 บิต | 10/12 บิต |
| ขนาดเทียบ JPEG (ภาพถ่าย) | 100% | 300–1000% | 65–75% | 40–60% |
| การรองรับเบราว์เซอร์ | ทั่วไป | ทั่วไป | Chrome 32, Firefox 65, Safari 14 | Chrome 85, Firefox 93, Safari 16 |
| ความเร็วเข้ารหัสโดยทั่วไป | เร็ว | เร็ว | ปานกลาง | ช้า |
JPEG — พื้นฐานสากล
ทำงานอย่างไร
JPEG (Joint Photographic Experts Group) มาตรฐานปี 1992 เป็นรูปแบบที่เก่าที่สุดในสี่แบบ ใช้ DCT แบบสูญเสียบนบล็อก 8×8 ตามด้วยการปรมาณและเข้ารหัสเอนทรอปี คุณภาพควบคุมด้วยตัวเลข 1–100 ตัวเข้ารหัสสมัยใหม่เช่น MozJPEG บีบอัดเพิ่ม 10–20% โดยไม่เปลี่ยนบิตสตรีม ทุกตัวถอดรหัส JPEG อ่านได้
เหมาะกับ
เนื้อหาภาพถ่ายที่ไล่เฉดนุ่มและมีรายละเอียด — บุคคล ทิวทัศน์ สินค้า รูปฮีโร่
ข้อดี
- รองรับในทุกโปรแกรมดูรูป
- ถอดรหัสด้วยฮาร์ดแวร์เกือบทุกที่
- ระบบนิเวศตัวปรับแต่งสมบูรณ์ (MozJPEG, jpegli)
ข้อเสีย
- ไม่มีช่องอัลฟา — พื้นหลังต้องราบเรียบ
- อาร์ติแฟกต์เป็นบล็อกบนตัวหนังสือ เส้น และขอบคม
- 8 บิตต่อช่องเท่านั้น
PNG — ไม่สูญเสียและโปร่งใส
ทำงานอย่างไร
PNG (Portable Network Graphics) สร้างกลางทศวรรษ 1990 เป็นทางเลือก GIF ที่ไม่มีสิทธิบัตร ไม่สูญเสียอย่างเคร่งครัด: บีบอัด DEFLATE บนตัวกรองพิกเซลต่อแถว ตัวปรับเช่น oxipng (Rust) ลองทุกชุดตัวกรอง/การบีบอัดเพื่อไฟล์เล็กสุดโดยไม่เปลี่ยนพิกเซล
เหมาะกับ
กราฟิก UI ไอคอน สกรีนช็อต ไดอะแกรม เส้นศิลป์ โลโก้สีเรียบ และทุกอย่างที่ต้องการอัลฟาจริง
ข้อดี
- ไม่สูญเสีย — พิกเซลผ่านไปกลับเหมือนเดิม
- อัลฟา 8 บิต สูงสุด 16 บิตต่อช่อง
- รองรับทั่วไป
ข้อเสีย
- ใหญ่บนภาพถ่าย — บ่อยครั้งใหญ่กว่า JPEG/WebP/AVIF หลายเท่า
- สเปกเดิมไม่มีแอนิเมชัน (APNG เป็นส่วนขยายภายหลัง)
WebP — ฟอร์แมตเน้นเว็บของ Google
ทำงานอย่างไร
WebP เปิดตัวโดย Google ปี 2010 อิง VP8 แล้วขยายโหมดไม่สูญเสียแยก รองรับทั้งสูญเสียและไม่สูญเสียในคอนเทนเนอร์เดียว พร้อมอัลฟาและแอนิเมชัน โหมดสูญเสียมักชนะ JPEG ราว 25–35% ที่คุณภาพเทียบกัน โหมดไม่สูญเสียชนะ PNG ราว 20–30%
เหมาะกับ
การส่งมอบเว็บทั่วไปเมื่อ AVIF ยังไม่ปลอดภัย — ภาพถ่าย สไปรต์ UI ที่มีโปร่งใส แทน GIF แอนิเมชัน และชั้น fallback ใต้ AVIF
ข้อดี
- หนึ่งฟอร์แมตครอบภาพถ่าย กราฟิก อัลฟาและแอนิเมชัน
- เล็กกว่า JPEG และ PNG อย่างชัดเจนที่คุณภาพใกล้เคียง
- รองรับกว้าง: เบราว์เซอร์หลักตั้งแต่ 2020
ข้อเสีย
- 8 บิตต่อช่อง — ไม่มี HDR
- ถอดรหัสช้ากว่า JPEG บางอุปกรณ์รุ่นเล็ก
AVIF — แนวหน้าเรื่องการบีบอัด
ทำงานอย่างไร
AVIF (AV1 Image File Format) โปรไฟล์ภาพนิ่งของตัวเข้ารหัสวิดีโอ AV1 เปิดตัว 2019 โดย Alliance for Open Media
รองรับสีถึง 12 บิต อัลฟาเต็ม HDR และโทนสีกว้าง และฟิล์มเกรน
ตัวเข้ารหัสอ้างอิง (aom-av1 ที่ libavif ใช้) ช้าแต่ได้การบีบอัดดีที่สุดสำหรับภาพถ่ายจริงในปัจจุบัน
เหมาะกับ
รูปฮีโร่ แกลเลอรีภาพ และทุกที่ที่แบนด์วิดท์สำคัญกว่า CPU
ใช้เป็นชั้นบนสุดในองค์ประกอบ <picture>
ข้อดี
- บีบอัดชั้นนำ — มักเล็กกว่า JPEG ราว 40–60%
- รองรับอัลฟา แอนิเมชัน HDR และโทนสีกว้าง และความลึก 10/12 บิต
- ไม่มีค่าลิขสิทธิ์และเปิด
ข้อเสีย
- เข้ารหัสช้า — วางแผน build-time หรือเข้ารหัสแบบอะซิงก์
- Safari เพิ่มการรองรับในเวอร์ชัน 16 (2022)
- กราฟิกสังเคราะห์อาจไม่สวยเท่า WebP lossless หรือ PNG
ควรใช้รูปแบบไหน
- ภาพถ่าย รูปฮีโร่เต็มกรอบ: AVIF เป็นหลัก WebP และ JPEG เป็น fallback ผ่าน
<picture> - กราฟิก UI ที่มีโปร่งใส (ไอคอน โลโก้): PNG เพื่อความเข้ากันได้เก่า WebP lossless เพื่อขนาดเล็กลง
- เส้นศิลป์ สกรีนช็อต ไดอะแกรม: PNG (หรือ WebP lossless) — JPEG/AVIF สร้างอาร์ติแฟกต์บนขอบคม
- แทน GIF แอนิเมชัน: WebP หรือ AVIF — เล็กกว่ามากและมีอัลฟาจริง
- หนึ่งฟอร์แมตทุกเบราว์เซอร์วันนี้: JPEG สำหรับภาพ PNG สำหรับกราฟิก — ไม่เล็กสุดแต่ไม่มีหนี้ความเข้ากัน
ในทางปฏิบัติไม่จำเป็นต้องเลือกอย่างเดียว ให้ส่ง AVIF ก่อน WebP รอง และ JPEG หรือ PNG สุดท้ายใน
<picture> — ทุกเบราว์เซอร์ได้เวอร์ชันที่เล็กที่สุดที่ถอดรหัสได้
คำถามที่พบบ่อย
แปลง JPG เป็น WebP อย่างไร
เปิด PicBrewery ลาก JPG ลงพื้นที่อัปโหลด WebP จะถูกสร้างอัตโนมัติพร้อม JPEG, PNG และ AVIF เลือกช่อง WebP แล้วคลิกไอคอนดาวน์โหลด ทุกอย่างในเบราว์เซอร์ — ไม่อัปโหลด
แปลง PNG เป็น AVIF อย่างไร
วาง PNG ใน PicBrewery การเข้ารหัสใหม่เป็น JPEG, WebP และ AVIF ทำพร้อมกันใน Web Workers คลิกคอลัมน์ AVIF เพื่อดาวน์โหลด หรือเลือกหลายแถวแล้วส่งออก ZIP ที่มีเฉพาะเวอร์ชันที่เล็กที่สุดต่อไฟล์ต้นทาง
AVIF ดีกว่า WebP หรือไม่
สำหรับภาพถ่าย AVIF มักได้ไฟล์เล็กกว่า WebP ราว 20–30% ที่คุณภาพที่รับรู้เท่ากัน เพราะอิง AV1 WebP ยังชนะเรื่องความเร็วเข้ารหัสและรองรับเบราว์เซอร์เก่ากว่า ทั้งคู่เสริมกัน
Safari รองรับ WebP หรือไม่
รองรับ Safari รองรับ WebP ตั้งแต่เวอร์ชัน 14 (macOS Big Sur, iOS 14, 2020) Safari ปัจจุบันถอดรหัสทั้งแบบสูญเสียและไม่สูญเสีย
PNG ไม่สูญเสียเสมอหรือไม่
ใช่ PNG ใช้ DEFLATE ซึ่งไม่สูญเสียคุณภาพอย่างเคร่งครัด พิกเซลเหมือนต้นทาง การลดขนาดมาจากตัวกรองและ oxipng ไม่ใช่การทิ้งข้อมูลภาพ
JPEG มีความโปร่งใสได้หรือไม่
ไม่ JPEG คลาสสิกไม่มีอัลฟา ต้องการโปร่งใสใช้ PNG, WebP หรือ AVIF JPEG XL มีอัลฟาแต่เบราว์เซอร์ยังรองรับไม่แพร่หลาย
AVIF เล็กกว่า JPEG เท่าไร
ภาพถ่ายทั่วไปด้วยตัวเข้ารหัส AVIF สมัยใหม่มักเล็กกว่า MozJPEG ราว 40–60% ที่คุณภาพเทียบกัน การประหยัดลดบนกราฟิกรายละเอียดน้อยที่ JPEG บีบอัดได้ดีอยู่แล้ว
เบราว์เซอร์ของฉันถอดรหัส AVIF ได้หรือไม่
AVIF รองรับใน Chrome 85+, Firefox 93+, Edge 121+ และ Safari 16+
สำหรับส่งมอบทั่วไป ใช้ <picture> พร้อม fallback WebP หรือ JPEG
PicBrewery เป็นฝั่งไคลเอนต์จริงหรือไม่
ใช่ การถอดรหัสและเข้ารหัสใหม่เกิดใน WebAssembly ใน Web Workers บนอุปกรณ์ของคุณ ไม่มีการส่งไบต์ภาพ — มีเพียงการโหลดแอปและไฟล์ตัวเข้ารหัส
แปลงระหว่างรูปแบบ
ต้องการแปลงคู่ใดเป็นคู่ใด เลือกด้านล่าง — แต่ละหน้ามีขั้นตอน การประหยัดที่คาดหวัง และ FAQ เฉพาะคู่
ลองกับรูปของคุณ
ลากชุด JPG เข้า PicBrewery แล้วดู WebP และ AVIF เคียงข้าง ไม่อัปโหลด