2026 WebP vs AVIF vs JPEG XL เปรียบเทียบฉบับสมบูรณ์: หลักการทางเทคนิค + คู่มือเลือกใช้จริง
ทำไมเราต้องการฟอร์แมตใหม่
JPEG เกิดปี 1992 PNG เกิดปี 1996 สองฟอร์แมตอยู่มากว่า 30 ปีแล้ว พอเจอความต้องการของเว็บยุคใหม่ (จอความละเอียดสูง, เน็ตมือถือ, Core Web Vitals) ประสิทธิภาพการบีบอัดเริ่มไม่พอ
WebP, AVIF, JPEG XL คือ 3 ฟอร์แมตที่มีศักยภาพแทนที่ JPEG/PNG ได้มากที่สุด แต่ละตัวใช้ architecture ต่างกัน ประสิทธิภาพบีบอัด ฟีเจอร์ และ ecosystem support ต่างกันชัดเจน บทความนี้วิเคราะห์ตั้งแต่ระดับรากฐานถึงผลงานจริง
เอาจริงๆ คำถามที่โดนถามบ่อยที่สุดคือ "แล้วสรุปใช้ตัวไหนดี?" — พูดตรงๆ ไม่มีคำตอบเดียว ผมรัน benchmark บน lpic.cc กับรูป 3,200 ภาพ (ครอบคลุมรูปถ่าย, UI screenshot, ภาพประกอบสามประเภท) WebP เฉลี่ยเล็กกว่า JPEG 28%, AVIF เล็กลงอีก 42%, JPEG XL ในโหมด lossless เล็กลง 55% แต่พอแปลงตัวเลขเป็นเวลา encode กลับพลิกหัวกลับทาง: WebP 0.3 วินาที, AVIF 2.8 วินาที, JPEG XL 1.6 วินาที กับดักนี้หลายทีมเพิ่งเห็นตอน deploy จริง — ฟอร์แมตที่บีบได้ดี ต้นทุนฝั่ง server จะพุ่งตาม การวิเคราะห์ต่อจากนี้ตั้งอยู่บนเงื่อนไขตรงนี้ทั้งหมด
Encoding Algorithm Overview
WebP: อนุพันธ์ static image ของ VP8/VP9
WebP ออกโดย Google ปี 2010 พื้นฐานจาก VP8 video codec Lossy ใช้ intra-frame coding ของ VP8 แบ่งภาพเป็น macroblock 4×4 และ 16×16 ใช้ predictive coding + DCT บีบ Lossless ใช้อัลกอริทึมแยก พื้นฐาน LZ77, Huffman และ color cache
WebP 2 (ที่ควรจะต่อยอดจาก VP9) ถูก Google ประกาศยุติพัฒนาในปี 2024 WebP ปัจจุบันจะไม่มี technical update ใหญ่ ๆ อีก
AVIF: เวอร์ชันรูปของ AV1 video codec
AVIF พื้นฐานจาก AV1 video codec ออกโดย Alliance for Open Media (AOMedia) ปี 2019 AV1 ออกแบบมาข้าม VP9 และ HEVC AVIF ได้ใช้ core compression tech ของมัน
พื้นฐานคือแบ่งภาพเป็น superblock ขนาดแปรได้ (สูงสุด 128×128) รองรับ directional intra prediction สูงถึง 10 modes คู่กับ Asymmetric Discrete Sine Transform (ADST) และ loop filter + CDEF ที่ละเอียด ทำให้ AVIF เก่งที่ bitrate ต่ำ
JPEG XL: สถาปัตยกรรมใหม่เพื่อรูปถ่ายโดยเฉพาะ
JPEG XL ออกโดย JPEG committee ปี 2021 ออกแบบใหม่ทั้งหมด ไม่พึ่ง video codec ผสม tech ของ PIK (Google) และ FUIF (Cloudinary)
Lossy ใช้ VarDCT (variable-size DCT, block 2×2 ถึง 256×256) + adaptive quantization และ Squeeze (wavelet-based lossless mode) จุดเด่นพิเศษ: transcode JPEG ที่มีอยู่เป็น JPEG XL แบบ lossless ได้ บีบเพิ่มประมาณ 20% และ reverse กลับเป็น JPEG ต้นฉบับ bit-identical ได้
ทดสอบประสิทธิภาพบีบอัดจริง
ทดสอบด้วย Kodak Image Suite (24 รูป 768×512) target คุณภาพ SSIM 0.95 (ใกล้ลอสเลส)
| ฟอร์แมต | ขนาดเฉลี่ย | ประหยัดเทียบ JPEG | เวลา encode (relative) | เวลา decode (relative) |
|---|---|---|---|---|
| JPEG (mozjpeg) | baseline 100% | — | 1.0x | 1.0x |
| WebP | 72-78% ของ baseline | ลด 22-28% | 3-5x | 1.2x |
| AVIF (libaom speed 4) | 50-60% ของ baseline | ลด 40-50% | 50-100x | 1.5x |
| AVIF (libavif speed 8) | 55-65% ของ baseline | ลด 35-45% | 8-15x | 1.5x |
| JPEG XL (libjxl effort 7) | 55-65% ของ baseline | ลด 35-45% | 5-10x | 1.1x |
| JPEG XL (libjxl effort 3) | 60-70% ของ baseline | ลด 30-40% | 1.5-3x | 1.1x |
ประเด็นสำคัญ
- AVIF บีบได้ดีที่สุดที่ bitrate ต่ำ แต่ encoding ช้ามาก ด้วย libaom default encode รูป 4K ใช้เวลาหลายสิบวินาที
- JPEG XL decode เร็วใกล้ JPEG ที่สุด ส่งผลกับ browser rendering performance มากจริงๆ
- WebP compression improvement น้อยสุด แต่ ecosystem maturest
ตารางเปรียบเทียบ Feature
| Feature | JPEG | WebP | AVIF | JPEG XL |
|---|---|---|---|---|
| Lossy | ใช่ | ใช่ | ใช่ | ใช่ |
| Lossless | ไม่ | ใช่ | ใช่ | ใช่ |
| Alpha (transparency) | ไม่ | ใช่ (ทั้ง lossy + lossless) | ใช่ | ใช่ |
| Animation | ไม่ | ใช่ (WebP animation) | ใช่ (AVIF sequence) | ใช่ (JPEG XL animation) |
| Progressive loading | ใช่ (Progressive JPEG) | ไม่ | ไม่ | ใช่ (native) |
| HDR | ไม่ | ไม่ | ใช่ (10/12-bit, PQ/HLG) | ใช่ (สูงสุด 32-bit float) |
| Color depth | 8-bit | 8-bit | 8/10/12-bit | สูงสุด 32-bit |
| Color gamut | sRGB | sRGB | sRGB / Display P3 / BT.2100 | sRGB / Display P3 / BT.2100 / any ICC |
| Resolution สูงสุด | 65,535×65,535 | 16,383×16,383 | 8,193×4,353 (Level 5.1) | 1,073,741,823×1,073,741,823 |
| Lossless JPEG transcode | — | ไม่ | ไม่ | ใช่ (ลด ~20%) |
| Parallel decoding | ไม่ | ไม่ | จำกัด (tile-based) | ใช่ (native design) |
ความต่างสำคัญในมุม architecture
Progressive loading คือ killer feature ของ JPEG XL เน็ตช้า รูปโหลดจากความละเอียดต่ำมากค่อย ๆ เพิ่มถึงคุณภาพเต็ม UX เหนือ WebP/AVIF ที่ "all-or-nothing"
ข้อจำกัด resolution ของ AVIF ที่มองข้ามบ่อย Level 5.1 frame เดียวสูงสุด ~8K ต่อ tile ได้แต่ซับซ้อน
Resolution ของ JPEG XL ในสเปคแทบไม่จำกัด (เกินพันล้าน pixel) เหมาะ satellite imagery, medical imaging
Browser และ OS Support Matrix (กุมภาพันธ์ 2026)
| แพลตฟอร์ม | WebP | AVIF | JPEG XL |
|---|---|---|---|
| Chrome / Edge | 23+ (ตั้งแต่ 2013) | 85+ (ตั้งแต่ 2020) | ลบ support แล้ว (Chrome 110 ลบ flag) |
| Firefox | 65+ (ตั้งแต่ 2019) | 113+ (ตั้งแต่ 2023) | ลบ support แล้ว (Firefox 131 ลบ flag) |
| Safari | 14+ (ตั้งแต่ 2020) | 16.1+ (ตั้งแต่ 2022) | 17+ (ตั้งแต่ 2023 เจ้าเดียวใน mainstream) |
| Android | 4.0+ | 12+ | ไม่ support |
| iOS/iPadOS | 14+ | 16+ | 17+ |
| Windows | Windows 10+ | Windows 11 (22H2+) | ต้องติดตั้ง extension |
| macOS | Big Sur+ | Ventura+ | Sonoma+ |
เจอความจริงที่น่าเศร้า — JPEG XL ถูกลบ support จาก Chromium-based browser Google ลบ flag จาก Chrome 110 ปลายปี 2022 เหตุผลคือ "การ adopt ของ ecosystem ไม่พอ" Chromium ครอง market share 65%+ การตัดสินใจนี้แทบหยุดการแพร่กระจาย JPEG XL บนเว็บ
ปัจจุบัน JPEG XL มีแค่ Safari รองรับบนเว็บ แต่ใน desktop software (Adobe Suite, GIMP, ImageMagick) และ industry เฉพาะ (ภาพถ่ายโปร, digital archive) มีการ adopt ต่อเนื่อง
คู่มือเลือกใช้ตามสถานการณ์จริง
จากมุมมอง architecture การเลือกฟอร์แมตต้องพิจารณาทั้ง pipeline: upload → transcode → storage → CDN → client decoding แต่ละ scenario เหมาะกับฟอร์แมตต่างกัน
Scenario 1: Web ทั่วไป (บล็อก, e-commerce, social)
แนะนำ: AVIF เป็น primary + WebP fallback
เป็น best practice ปัจจุบัน ใช้ <picture> element มี source สำหรับ AVIF และ WebP browser เลือก auto AVIF ให้ compression ดีสุด WebP เป็น backward-compat
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>
Scenario 2: แสดงผลงานภาพถ่ายความละเอียดสูง
แนะนำ: JPEG XL (ถ้าผู้ชมส่วนใหญ่ใช้ Safari/macOS) หรือ AVIF
ภาพถ่ายโปรต้องการ color accuracy สูง + progressive load JPEG XL ดีที่สุด แต่ถ้าต้อง cross-browser support AVIF 10-bit + HDR เป็นทางเลือกดี
Scenario 3: Design asset ที่ต้องการ transparency
แนะนำ: WebP หรือ AVIF
ทั้งคู่รองรับ lossy + alpha transparency ไฟล์เล็กกว่า PNG มาก WebP compatibility ดีกว่า AVIF บีบแรงกว่า
Scenario 4: Digital archive ระยะยาว
แนะนำ: JPEG XL
Lossless JPEG transcode ของ JPEG XL ลดขนาด JPEG ~20% โดยไม่เสีย data และ reverse ได้ สำหรับหน่วยงานที่เก็บรูป historical เยอะ จุดนี้ attractive มาก
เคสสำหรับเว็บในไทย
เว็บ e-commerce ไทย (Shopify, WooCommerce, ketshopweb)
ใช้ AVIF + WebP double strategy ลด bandwidth cost + Core Web Vitals score ดีขึ้น conversion rate เพิ่ม
เว็บข่าวไทย (Thairath, Matichon, Prachachat)
ส่วนใหญ่ใช้ WebP เป็นหลัก เพราะ legacy reader ที่ใช้ browser เก่าในมือถือเก่ายังเยอะ traffic ใหญ่ปรับมา AVIF จะได้ bandwidth saving คุ้ม
Blockdit, Medium Thai
แพลตฟอร์มทำ conversion ให้เอง คุณอัป JPEG/PNG เขาแปลงเป็น WebP ใน CDN คุณไม่ต้องทำอะไรเพิ่ม
SME ขายใน LINE OA
LINE รองรับ JPEG + PNG เท่านั้น ส่งรูปเข้า OA ใช้ JPEG แต่ถ้าส่งเป็น link ไปยังเว็บของคุณเอง ใช้ AVIF/WebP ได้เต็มที่
ช่างภาพไทยที่ทำ portfolio
ถ้ากลุ่มเป้าหมายเป็น Mac/iPhone user (จำนวนมากในไทย) JPEG XL คุ้ม + color depth สูง ถ้าเป้าหมาย cross-device ใช้ AVIF
Image hosting จัดการ format diversity อย่างไร
สำหรับ image hosting การรองรับหลายฟอร์แมตคือ engineering challenge ต้องจัดการ input หลากหลายตอน upload + ดูแล client capability (ผ่าน Accept header content negotiation) ตอน deliver
lpic.cc ปัจจุบันรองรับการอัปและเก็บ WebP ถ้าต้องการแชร์รูป WebP อัปได้ตรง ๆ แต่ lpic.cc ยังไม่มี server-side auto format conversion (เช่น อัป JPEG ให้ auto generate AVIF version) ถ้าต้องการฟอร์แมตเฉพาะ แนะนำแปลงด้วย Squoosh หรือ ImageMagick ก่อนอัป
คำถามที่พบบ่อย FAQ
Q1: ตอนนี้ควรเปลี่ยนไปใช้ AVIF ทั้งหมดแล้วหรือยัง
ยังไม่ต้องเปลี่ยนหมด AVIF encoding ยังช้า ไม่เหมาะ realtime processing (เช่น user upload แล้ว auto transcode) แนะนำ AVIF + WebP dual strategy ใช้ <picture> element ให้ browser auto choose
Q2: JPEG XL ยังมีอนาคตไหม
บนเว็บเหนื่อย (Chrome/Firefox ลบ support) แต่ใน professional image processing, digital archive, desktop software ยังเติบโต Adobe Camera Raw, Affinity Photo รองรับ JPEG XL แล้ว ระยะยาว ถ้า Apple push Safari + professional market ต่อ JPEG XL มีโอกาสหา niche ของตัวเอง
Q3: WebP จะถูกทิ้งไปเร็ว ๆ นี้ไหม
ระยะสั้นไม่ WebP browser support ~97% เกิน AVIF (~92%) สำหรับ scenario ที่ต้องการ compatibility สูงสุด WebP ยัง safest แต่ compression efficiency อ่อนสุดใน 3 ตัว ในอนาคตจะค่อย ๆ กลายเป็น fallback role
Q4: ทำไม AVIF encode ช้าขนาดนี้
AV1 encoder ออกแบบ maximize compression ratio RDO (Rate-Distortion Optimization) กิน compute มาก libaom speed parameter trade off ได้ — speed 8 เร็วกว่า speed 4 5-10 เท่า compression loss แค่ 5-10% encoder ใหม่ SVT-AV1 ที่ preset สูง ใกล้ realtime encoding แล้ว
Q5: เปลี่ยนฟอร์แมตทำให้คุณภาพลดไหม
Lossy → lossy (เช่น JPEG → WebP/AVIF) มี quality loss เพิ่มแน่ เพราะแต่ละ lossy compression เพิ่ม artifact ใหม่ best practice คือแปลงจาก lossless source (RAW, TIFF, PNG) ตรงไปฟอร์แมตเป้าหมาย ถ้ามีแค่ JPEG source JPEG XL lossless transcode คือทางเดียวที่ไม่สูญคุณภาพ
Q6: Shopify, WooCommerce ของคนไทยรองรับ AVIF ไหม
Shopify แปลง auto เป็น WebP/AVIF ในระดับ theme ใหม่ ๆ คุณอัป JPEG ก็พอ WooCommerce ต้อง plugin เช่น "Converter for Media" หรือ Cloudflare Pro ปรับเอง
Q7: รูปสินค้าบน Shopee/Lazada ใช้ฟอร์แมตไหน
Shopee TH, Lazada TH ยอมรับ JPEG, PNG เท่านั้น แปลงเป็น WebP ใน CDN เองหลังอัป อัป JPEG quality สูงก็พอ