บ่ายวันศุกร์ มิ้นท์นั่งอยู่หน้าจอ PageSpeed Insights พร้อม score 38

มิ้นท์เป็น Frontend Developer freelance อายุ 26 รับงาน optimize เว็บ e-commerce ขายเฟอร์นิเจอร์ในกรุงเทพ catalog 1,800 สินค้า รูปภาพ 12,000 รูป Lighthouse บอก "Serve images in next-gen formats · estimated savings 14.2s"

เธอเปิด Chrome DevTools ดู Network tab รูป hero ขนาด 3.8MB JPEG รูปสินค้าหน้า list 2,200 รูป รวม 28MB เธอโทรหาผมตอนสามทุ่ม "พี่ ผมต้องเปลี่ยนเป็น WebP หรือ AVIF หรือ JPEG XL กันแน่ คนเขียน blog บอกไม่ตรงกันสักคน"

ผมรู้จักความสับสนของมิ้นท์ดี ผมเคยใช้เวลา 2 สัปดาห์ migrate เว็บลูกค้าโรงแรมจาก JPEG เป็น AVIF ทั้งหมด ใช้ Sharp script แปลง 8,400 รูป ผลคือ Safari บน iOS 14 ของลูกค้าส่วนใหญ่แสดงรูปไม่ได้ ผมต้อง rollback กลางคืน + ทำใหม่ด้วย picture element ที่ fallback เป็น WebP + JPEG ผมเสียเวลาเพิ่ม 1 สัปดาห์เพราะเลือก format ผิดตั้งแต่ต้น คุณคิดว่าทำไม Lighthouse แนะนำ next-gen format แต่ไม่บอกว่าตัวไหน?

คำตอบสั้น (TL;DR)

ปี 2026 ใช้ WebP เป็น default สำหรับเว็บทั่วไป รองรับ 97% browser ลดขนาด 25-35% จาก JPEG ส่วนเว็บ e-commerce ที่ performance สำคัญ ใช้ AVIF (ลด 40-50%) คู่กับ WebP fallback ผ่าน picture element ยังไม่แนะนำ JPEG XL เพราะ Chrome ถอด support เหลือรองรับแค่ 5% ราคา migrate ในไทย ฿15,000-80,000 ครั้งเดียว

มิ้นท์ไม่ใช่คนเดียวที่งง ผมเจอ developer 30+ คน ที่เลือก image format ผิดเพราะอ่านบทความใหม่ที่ไม่อัพเดท browser support ปี 2026 คุณรู้ไหมว่าทำไม Chrome ถอด JPEG XL support ทั้งที่มันเป็น format ที่ดีที่สุด technically?

ทำไม Image Format เก่ายังใช้กันเยอะแต่ทำเว็บช้า

เหตุผลไม่ใช่ developer ขี้เกียจ แต่เพราะ tooling เก่า (Photoshop default JPEG, WordPress upload JPG) ทำให้รูปส่วนใหญ่ใน production ยังเป็น JPEG ปกติ

JPEG ที่ออกแบบมาตั้งแต่ 1992 ใช้ DCT compression ที่ดีที่สุดในยุคนั้น แต่ยุค 2026 algorithm ใหม่ลดขนาดได้ 50% โดยคุณภาพเท่ากัน ·เปรียบเหมือนกับการขับรถยนต์รุ่นปี 1990 ในยุคที่มี Tesla คือ ขับได้ แต่เสียประสิทธิภาพ + เสียโอกาส

ผม audit ลูกค้า 40+ ราย พบว่า 78% ยังใช้ JPEG เป็น default + 0% ที่เปลี่ยนเป็น AVIF/WebP ถูกวิธี (มี picture fallback) Image format ที่เหมาะกับเว็บไม่ได้ขึ้นกับ "ใหม่ที่สุด" แต่ขึ้นกับ "รองรับเยอะที่สุด + ลดขนาดมากที่สุดในกรณี audience ของคุณ"

อ้างอิงจากแนวทางของ คู่มือ image optimization ของ web.dev (ทีม Google Chrome) การเสิร์ฟรูปแบบ next-gen format พร้อม fallback ที่ถูกต้องคือวิธีลด LCP ที่ได้ผลที่สุดสำหรับ Core Web Vitals

เปรียบเทียบ WebP vs AVIF vs JPEG XL (ตามการใช้งานจริงปี 2026)

เกณฑ์ WebP AVIF JPEG XL
ลดขนาด vs JPEG 25-35% 40-50% 30-40%
Browser support (2026) 97% 92% 5% (Chrome ถอด)
Encode speed เร็ว (baseline) ช้ากว่า 10x ปานกลาง
Lossless support มี มี มี (ดีที่สุด)
Animation มี (แทน GIF) มี มี
HDR support ไม่มี มี มี
Progressive decode ไม่มี ไม่มี มี

3 สถานการณ์เลือก Format ตามจริง

สถานการณ์ 1: เว็บทั่วไป (corporate, blog, portfolio)

ใช้ WebP เป็น default ครบทุกรูป ไม่ต้อง fallback ก็ได้ เพราะ browser ที่ไม่รองรับ WebP เหลือ 3% และส่วนใหญ่เป็น browser เก่าที่ user ที่ไม่ใช่ target audience

ทุก CMS ปัจจุบัน (Webflow, WordPress 6+, Shopify) แปลง JPEG/PNG เป็น WebP อัตโนมัติ ·เพียงเปิด setting

สถานการณ์ 2: E-commerce + Media-heavy (ลดขนาดสำคัญที่สุด)

ใช้ AVIF + WebP fallback ผ่าน picture element ดังนี้

<picture><source srcset="hero.avif" type="image/avif"><source srcset="hero.webp" type="image/webp"><img src="hero.jpg" alt="..."></picture>

Browser จะเลือก format ที่รองรับโดยอัตโนมัติ AVIF ก่อน · WebP ถ้าไม่รองรับ AVIF · JPEG ถ้าไม่รองรับทั้งคู่

เคสจริง: เว็บลูกค้าเฟอร์นิเจอร์ของมิ้นท์ migrate ไปใช้ AVIF + WebP fallback ขนาดรูปทั้งเว็บลดจาก 28MB เหลือ 11MB ลด 61% LCP จาก 4.8s เหลือ 1.9s

สถานการณ์ 3: Professional photography (คุณภาพสูงสุด)

ไม่แนะนำ JPEG XL ในปี 2026 เพราะ Chrome ไม่รองรับ ทำให้ user 65% ของเว็บทั่วโลกแสดงผลไม่ได้

ใช้ AVIF (lossless mode) หรือ PNG-24 + WebP fallback แทน รอ Chrome กลับมา support JPEG XL (ยังไม่ confirm)

เครื่องมือ Convert Image Format 2026

Tool เหมาะกับ ราคา
Squoosh.app Single image · comparison preview ฟรี
Sharp (Node.js) Bulk convert · build pipeline ฟรี
Cloudinary Auto convert + CDN + responsive ฟรี-$224/mo
ImageKit.io Alternative Cloudinary ราคาดีกว่า ฟรี-$89/mo
Webflow Asset Manager Built-in auto WebP conversion รวมใน plan

ราคา Migrate Image Format ในไทย 2026

Scale ราคา
เว็บ corporate (50-200 รูป) ฿15,000-30,000
เว็บ e-commerce (1,000-5,000 รูป) ฿30,000-80,000
Setup auto CDN (Cloudinary/ImageKit) ฿20,000-50,000 + monthly fee
"Image format ที่ดีที่สุดในปี 2026 ไม่ใช่ format ที่ technically ดีที่สุด แต่เป็น format ที่ browser ของ user คุณรองรับ + ลดขนาดได้มากที่สุด สำหรับเว็บไทยทั่วไป WebP คือคำตอบ สำหรับ e-commerce ที่ performance สำคัญ AVIF + fallback คือคำตอบ"
·Thanakit Chaithip, Founder, Vision X Brain

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

WebP คืออะไร ต่างจาก JPEG ยังไง

WebP เป็น image format ที่ Google พัฒนาในปี 2010 ใช้ VP8 video codec compress รูปได้เล็กกว่า JPEG 25-35% ที่คุณภาพเท่ากัน รองรับทั้ง lossy + lossless + animation + transparency (alpha channel) Browser รองรับ 97% ปี 2026

AVIF vs WebP ตัวไหนดีกว่า

AVIF บีบอัดดีกว่า WebP ~15-20% และมี HDR support แต่ encode ช้ากว่า 10x + browser support ต่ำกว่า 5% สำหรับเว็บที่ต้องการ performance สูงสุด ใช้ AVIF + WebP fallback ผ่าน picture element เว็บทั่วไป WebP เพียงพอ

JPEG XL ดีจริงไหม ทำไม Chrome ถอด

JPEG XL technically ดีที่สุดในทุก format · lossless ดีกว่า, progressive decode, HDR แต่ Chrome team ตัดสินใจถอดในปี 2023 เพราะ "lack of interest" จาก ecosystem ผลคือ JPEG XL ไม่เหมาะใช้ production ปี 2026 รอ Chrome กลับมา support ก่อน

ราคา migrate รูปเว็บเป็น WebP/AVIF เท่าไหร่

เว็บ corporate (50-200 รูป) ฿15K-30K · e-commerce (1K-5K รูป) ฿30K-80K · Auto CDN setup (Cloudinary/ImageKit) ฿20K-50K + monthly fee $20-200 ขึ้นกับ traffic

Webflow รองรับ WebP/AVIF ไหม

Webflow Asset Manager แปลง JPEG/PNG เป็น WebP อัตโนมัติ ทุก image element รองรับ responsive srcset AVIF ยังไม่ support native แต่ใช้ Custom Code เพิ่ม picture element ได้

บริการที่เกี่ยวข้อง

มิ้นท์วันนี้

มิ้นท์เลือกใช้ AVIF + WebP fallback ผ่าน picture element สำหรับเว็บเฟอร์นิเจอร์

ใช้ Sharp script ใน Node.js convert รูปทั้ง 12,000 รูปภายใน 4 ชั่วโมง deploy ผ่าน CDN ขนาดรูปทั้งเว็บลดจาก 28MB เหลือ 11MB Lighthouse score เพิ่มจาก 38 เป็น 84 conversion rate ของหน้า product page เพิ่ม 22% ภายในเดือนแรก

ผมถามมิ้นท์ว่า migration ครั้งนี้บทเรียนใหญ่ที่สุดคืออะไร

เขานิ่งไปนาน แล้วบอกว่า "พี่ ผมเรียนรู้ว่าการเลือก format ไม่ได้อยู่ที่ format ไหนดีที่สุด แต่อยู่ที่ user ของผมเห็นรูปได้หรือเปล่า"

สิ่งที่ทำได้ทันที: เปิด Squoosh.app คืนนี้ upload รูป hero ของเว็บคุณ compare WebP vs AVIF ดูขนาดไฟล์ + คุณภาพ ถ้า AVIF ลดได้มากกว่า 30% ขึ้นไป + browser audience ของคุณส่วนใหญ่ใช้ Chrome/Edge/Firefox = เริ่ม migrate ใช้ picture element ทันที