วิธีเพิ่มความเร็วเว็บไซต์ด้วย AVIF และ WebP: คู่มือฉบับสมบูรณ์

Fri, 10 Apr 2026 00:00:00 +0000

TL;DR – การสลับ JPEG/PNG ไปเป็น AVIF (หรือ WebP เมื่อ AVIF ไม่รองรับ) สามารถลดขนาดภาพได้ 30‑80 %, ลด LCP ลงได้ถึง 0.5 s, และเพิ่ม SEO โดยไม่มีการเสียคุณภาพภาพใด ๆ การใช้ fallback แบบ หรือกฎ Accept‑header อย่างง่ายทำได้ในไม่กี่นาที และ CDN ส่วนใหญ่สามารถทำงานหนักให้โดยอัตโนมัติ

ทำไมรูปแบบภาพ “next‑gen” ถึงสำคัญในตอนนี้

ทุกมิลลิวินาทีมีความสำคัญบนเว็บ การศึกษาจาก Akamai และ Google แสดงว่า การประหยัด 100 ms จะทำให้รายได้เพิ่มขึ้น 1‑2 % สำหรับเว็บไซต์อีคอมเมิร์ซ รูปภาพเป็นสาเหตุหลักของการใช้ข้อมูลบนหน้าเว็บทั่วไป – > 60 % ของจำนวนไบต์ทั้งหมด (HTTP Archive, 2024)

มาแล้ว AVIF และ WebP ทั้งสองสัญญาว่าไฟล์จะเล็กลง 30‑80 % เมื่อเทียบกับ JPEG/PNG แบบเก่า ในขณะที่คุณภาพภาพยังคงเหมือนเดิมต่อสายตามนุษย์ ผลตอบแทนเกิดขึ้นทันที:

แบนด์วิดท์ต่ำลง → แผนข้อมูลราคาถูกลงสำหรับผู้ใช้มือถือ.
การโหลดหน้าเร็วขึ้น → Core Web Vitals ที่ดีขึ้น, การจัดอันดับ Google สูงขึ้น.
ภาระเซิร์ฟเวอร์ลดลง → แคชใช้พื้นที่น้อยลง, ค่าใช้จ่าย CDN ลดลง.

หากคุณกำลังทำการปรับแต่ง CSS/JS อยู่แล้ว การบีบอัดภาพเป็นผลไม้ที่ง่ายที่สุดที่ให้ ROI สูงสุด.

AVIF vs. WebP – การเปรียบเทียบอย่างรวดเร็ว

คุณลักษณะ	AVIF	WebP
ต้นกำเนิด	AV1‑derived (ISO/IEC 23000‑22, 2020)	Google’s VP8‑based format (2010)
การบีบอัด	Lossy & lossless (both AV1‑based), alpha, HDR (10‑bit)	Lossy (VP8), lossless, alpha, animation
ความลึกบิต	8‑bit & 10‑bit (HDR)	8‑bit only
ขนาดโดยประมาณเมื่อเทียบกับ JPEG	45‑65 % smaller (lossy)	25‑35 % smaller (lossy)
ขนาดโดยประมาณเมื่อเทียบกับ PNG	50‑70 % smaller (lossless)	30‑45 % smaller (lossless)
การถอดรหัสด้วยฮาร์ดแวร์	Growing GPU support (Intel Xe, AMD, ARM Mali)	Native on most CPUs/GPUs; hardware accel on Android, Chrome, Safari iOS 16+
แอนิเมชัน	AVIF‑A (experimental)	WebP‑A (stable, widely used)
การสนับสนุนเบราว์เซอร์ (เม.ย. 2026)	Chrome 85+, Edge 85+, Firefox 93+, Safari 16.4+, Android WebView 85+	Chrome 23+, Edge 18+, Firefox 65+, Safari 14+, Android WebView 23+

สรุป: AVIF ชนะในเรื่องการบีบอัดดิบและการสนับสนุน HDR ในขณะที่ WebP มีการครอบคลุมแบบ legacy ที่กว้างที่สุดและระบบแอนิเมชันที่พัฒนาเต็มรูปแบบ วิธีปฏิบัติที่เหมาะสมคือให้บริการ AVIF ก่อน, fallback ไปยัง WebP, แล้วจึงเป็น JPEG/PNG สำหรับกรณีที่เหลือน้อย ๆ

การสนับสนุนเบราว์เซอร์และกลยุทธ์ fallback ที่คุณสามารถคัดลอก‑วางได้

1. รูปแบบ (การเจรจาฝั่งไคลเอนต์)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="ภาพฮีโร่ของพระอาทิตย์ขึ้นเหนือเมือง" loading="lazy" width="1200" height="800">
picture>

เบราว์เซอร์จะเลือกฟอร์แมตแรกที่เข้าใจ; เบราว์เซอร์เก่าจะละเว้นแท็ก และโหลด fallback เป็น JPEG.

2. การเจรจา `Accept` header ฝั่งเซิร์ฟเวอร์ (สำหรับ URL เดียว)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

หากไคลเอนต์ระบุว่า image/avif, Nginx จะให้บริการ hero.avif; มิฉะนั้นจะ fallback ไปยัง WebP หรือ JPEG.

3. ให้ CDN ทำงานหนักให้

ผู้ให้บริการ edge ส่วนใหญ่ (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) มีสวิตช์ที่แปลงไฟล์ JPEG/PNG ที่อัปโหลดเป็น AVIF/WebP โดยอัตโนมัติตาม Accept header เปิดใช้งาน, ลบแคช, แล้วเสร็จสิ้น

เครื่องมือและกระบวนการทำงาน – นำ AVIF/WebP เข้าสู่ pipeline ของคุณ

งาน	คำสั่ง AVIF	คำสั่ง WebP
Encode lossless	`avifenc -l -q 0 input.png output.avif`	`cwebp -lossless input.png -o output.webp`
Encode lossy (quality 50)	`avifenc -q 50 input.jpg output.avif`	`cwebp -q 50 input.jpg -o output.webp`
Batch conversion (Node)	`sharp('src/*/.png').avif({quality:50}).toFile('dist/')`	`sharp('src/*/.png').webp({quality:50}).toFile('dist/')`
Animated conversion	`avifenc --animation frames/.png output.avif` (still experimental)*	`gif2webp animation.gif -o animation.webp`

คำสั่งบรรทัดเดียวสำหรับ CI pipelines ส่วนใหญ่

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

เคล็ดลับ: เก็บแหล่งต้นฉบับความละเอียดสูงไว้ใน repo; สร้าง AVIF/WebP ขณะ build ทำให้คุณสามารถรันใหม่ด้วยการตั้งค่าคุณภาพต่าง ๆ โดยไม่ต้องอัปโหลดไฟล์ใหม่.

ผลกระทบในโลกจริง – ตัวเลขที่สำคัญ

สถานการณ์	JPEG (baseline)	WebP (lossy)	AVIF (lossy)	AVIF (lossless)
1 MP photo, 90 % quality	120 KB	78 KB (‑35 %)	55 KB (‑55 %)	68 KB (‑43 %)
Transparent logo (500 × 500)	45 KB (PNG)	28 KB (‑38 %)	22 KB (‑51 %)	24 KB (‑47 %)
5‑s animated banner (10 fps)	1.2 MB (GIF)	380 KB (‑68 %)	340 KB (‑72 %)	–

แหล่งที่มา: การตรวจสอบด้วย WebPageTest + Lighthouse (2024‑2025) บนเว็บไซต์ค้าปลีกที่ทำการทดสอบ A/B เป็นเวลา 4 สัปดาห์ รุ่น AVIF ให้ LCP เร็วขึ้น 0.4 s และ เพิ่มการแปลงบนมือถือ 12 %.

กรณีศึกษา ที่คุณสามารถอ้างอิงได้

ผู้ค้าที่ใช้ Shopify (2025) – AVIF สำหรับภาพย่อสินค้า ลดน้ำหนักหน้าเว็บลง 38 % และลด LCP ลง 0.3 s บน 3G.
The New York Times – เปลี่ยนภาพในบทความเป็น AVIF, ประหยัดแบนด์วิดท์ 45 % และเพิ่มการมีส่วนร่วมบนมือถือ 12 %.
Airbnb – รูปโปรไฟล์โฮสต์ให้บริการเป็น AVIF บนเบราว์เซอร์ที่รองรับ, ทำให้การวาดภาพแรกเร็วขึ้น 0.4 s บนเครือข่ายช้า.

สิ่งที่ควรทำต่อ – เช็คลิสต์สั้น

ตรวจสอบปริมาณภาพปัจจุบันของคุณ – Lighthouse “Serve images in next‑gen formats”.
เพิ่มขั้นตอนการ build ที่ส่งออก AVIF (และ WebP เป็น fallback) โดยใช้ sharp หรือ avifenc.
อัปเดต HTML ด้วยบล็อก หรือเปิดใช้งานการเจรจา Accept ฝั่งเซิร์ฟเวอร์.
ตั้งค่า header แคชระยะยาว (Cache‑Control: max-age=31536000, immutable).
เปิดใช้งาน lazy‑loading (loading="lazy" หรือ IntersectionObserver) เพื่อหลีกเลี่ยงการถอดรหัส AVIF ที่อยู่นอกหน้าจอ.
เปิดการแปลงที่ edge ของ CDN หากคุณไม่ต้องการเก็บ AVIF ไว้ในเครื่อง.
ตรวจสอบ Core Web Vitals – คุณควรเห็น LCP ลดลง 0.2‑0.5 s ภายในหนึ่งสัปดาห์หลังการเปิดใช้งาน.

ภาพในอนาคต: ภายในปี 2028 IDC คาดว่า > 80 % ของภาพบนเว็บจะเป็น AVIF‑first, เนื่องจากการสนับสนุน HDR และ header “image format negotiation” ที่กำลังจะมาถึงใน Chrome 130+. การเริ่มต้นเร็วไม่เพียงทำให้ประสิทธิภาพดีขึ้นในวันนี้ แต่ยังทำให้เว็บไซต์ของคุณพร้อมสำหรับคลื่นต่อไปของประสบการณ์เว็บแบบภาพ

แท็ก: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp

next-gen-web-graphics-avif-webp on File Format Blog