AVIF vs WebP khi nào chọn? | So sánh format ảnh web 2026

Lighthouse báo “Serve images in next-gen formats”. Designer gửi PNG 3MB từ Figma. Dev hỏi: AVIF hay WebP? — và team chọn một format cho mọi asset vì “nghe nói nhỏ hơn”.

Kết quả thường gặp trên landing SME / agency VN: hero đẹp nhưng chữ UI mờ, hoặc CI encode AVIF chậm 10× khiến PR queue tắc. Bài này là so sánh format — khi nào chọn AVIF, khi nào WebP, khi nào giữ JPEG/PNG. Chi tiết slider quality WebP nằm ở WebP quality settings.

Bài viết này giúp bạn

• Phân biệt AVIF vs WebP theo mục đích (không theo hype)
• Đọc bảng so sánh: kích thước, hỗ trợ, encode, alpha, animation
• Quyết định theo 4 class asset: photo / UI / logo / OG
• Viết <picture> fallback đúng thứ tự
• Biết giới hạn tool browser và khi nào cần CLI
• Case study freelance + checklist trước ship

---

AVIF và WebP khác nhau ở đâu?

Cả hai là next-gen image format: lossy + lossless, hỗ trợ alpha (transparency), mục tiêu thay JPEG/PNG trên web.

Tiêu chí	WebP	AVIF
Nền tảng codec	VP8 / VP8L (Google)	AV1 still (AOMedia)
Ảnh chụp @ bitrate thấp	Tốt	Thường nhỏ hơn
Screenshot / chữ UI	Ổn nếu quality cao	Dễ mềm cạnh nếu nén mạnh
Hỗ trợ trình duyệt (2026)	Rất rộng	Rộng, vẫn cần fallback cho niche
Encode trong browser	Canvas/toBlob phổ biến	Không đồng đều — hay dùng CLI
Tốc độ encode	Nhanh hơn	Chậm hơn (trade-off kích thước)
Animation	Có (thay GIF)	Có (AVIF sequence) — toolchain phức tạp hơn

WebP = “đủ tốt, ship nhanh, tooling sẵn”.
AVIF = “ăn thêm vài chục % byte trên photo nếu bạn chịu chi phí encode và fallback”.

---

Bảng quyết định nhanh

Quy tắc một dòng

1. Photo nặng, LCP → AVIF nếu pipeline sẵn; không thì WebP.
2. Chữ / UI bitmap → WebP cao hoặc lossless; AVIF chỉ sau khi zoom 100% ổn.
3. Không đo được → mặc định WebP, đừng nhảy AVIF “vì trend”.

---

Hỗ trợ trình duyệt và fallback

Năm 2026, Chrome / Edge / Firefox / Safari hiện đại đều decode WebP và hầu hết decode AVIF. Điểm còn lại nằm ở:

• Android WebView / in-app browser của app bank, chat nội bộ
• Email HTML và một số CMS upload filter
• CDN / image proxy cũ không nhận image/avif

Pattern chuẩn:

<picture>
  <source type="image/avif" srcset="hero.avif" />
  <source type="image/webp" srcset="hero.webp" />
  <img src="hero.jpg" alt="Hero landing" width="1200" height="630" />
</picture>

Browser lấy source đầu tiên nó hiểu. Không có AVIF → WebP → JPEG. Đừng chỉ ship .avif và hy vọng.

Với thumb nhỏ (dưới ~30–40KB sau WebP), đôi khi WebP-only + JPEG fallback đủ — chi phí sinh thêm AVIF không đáng.

---

Encode: điểm team hay bỏ qua

AVIF thắng dung lượng nếu bạn encode được ở quality tương đương cảm nhận. Encode AVIF thường:

• Chậm hơn WebP rõ rệt trên máy CI shared
• Cần library (libavif, sharp với plugin, Squoosh CLI…) — không phải lúc nào canvas.toBlob('image/avif') cũng có trên mọi máy designer

WebP:

• Encode nhanh
• Nén ảnh Kawa chạy trong trình duyệt, xuất JPEG / WebP / GIF — không upload server, phù hợp screenshot có dữ liệu nhạy cảm của khách
• Dễ kéo slider quality và so before/after trước khi commit

# Ví dụ tư duy pipeline (CLI — không phải Kawa)
# 1) Resize đúng ~2× CSS width
# 2) WebP q≈80 cho photo → đo KB + mắt
# 3) AVIF cq tương đương → nếu tiết kiệm ≥15–20% và LCP cải thiện → giữ AVIF
# 4) UI shot: ưu tiên WebP q≥88 hoặc lossless trước khi thử AVIF

Không nói dối tooling: Kawa giúp bước (2) cho WebP/JPEG. Bước AVIF thuộc build/CLI của bạn.

---

Case study 1 — Landing SME (freelance VN)

Bối cảnh: Freelancer nhận landing bất động sản. Hero JPG 2.1MB (4000px). Designer export thêm 8 PNG screenshot UI “tính năng”.

Asset	JPEG/PNG gốc	WebP	AVIF (CLI)	Quyết định
Hero photo 1200 CSS px	420 KB (đã resize)	168 KB @ q80	124 KB	AVIF + WebP + JPG
Screenshot bảng giá	310 KB PNG	94 KB @ q90	88 KB nhưng chữ hơi mềm @ cq thấp	WebP q92
Logo	18 KB PNG	12 KB lossless	không cần	SVG (sau)

Bài học: AVIF thắng hero; UI giữ WebP cao. Một format cho tất cả = chữ bảng giá bị ticket từ khách.

Case study 2 — Outsourcing team, CI 12 phút

Team chuyển toàn bộ image sang AVIF trong GitHub Actions. Encode tuần tự trên runner 2-core → job image +7 phút. LCP mobile chỉ cải thiện ~80ms vì hero đã WebP tốt.

Họ rollback: chỉ AVIF cho 3 LCP candidate; còn lại WebP. CI về gần baseline. Format “tốt nhất” không phải format “cho mọi file”.

---

Lỗi thường gặp

Lỗi	Hệ quả	Cách tránh
AVIF-only không fallback	Ảnh trắng trên niche browser	Luôn <picture> + JPEG/PNG
Lossy mạnh trên UI	Glyph nhoè, “như cháo”	Class riêng: UI ≠ photo
Full-res 4K rồi nén	Vừa nặng vừa khuyến khích hạ quality	Resize ~2× display trước
Re-encode 5 lần qua CDN	Generation loss	Master PNG/JPG → 1 lần encode
Tin “AVIF luôn −50%”	Kỳ vọng sai trên UI/logo	Đo trên asset dự án

Chi tiết quality slider, lossy vs lossless WebP: WebP quality bao nhiêu?.

---

Quy trình thực tế với Kawa + pipeline

1. Mở Nén ảnh — kéo ảnh đã che PII nếu cần
2. Chọn WebP, chỉnh quality, kéo thanh before/after
3. So kích thước và cạnh chữ ở viewport thật (không chỉ preview tool)
4. Nếu photo và WebP vẫn > ngân sách LCP → encode AVIF bằng CLI/build, gắn <picture>
5. Ghi trong PR: hero → avif+webp+jpg; ui-shot → webp q92

Công cụ Kawa: miễn phí, không đăng ký, xử lý local — phù hợp freelancer gửi bản demo cho khách trước khi gắn CDN production.

---

Checklist chọn format trước ship

• Đã phân loại photo / UI / logo / OG
• Đã resize đúng kích thước hiển thị
• Photo: so WebP vs AVIF (nếu có CLI); UI: WebP cao trước
• Có fallback trong <picture> nếu ship AVIF
• OG card không phụ thuộc AVIF-only
• CI encode không làm pipeline quá chậm
• Đã A/B WebP trên image-compress
• Quyết định format theo class ghi trong repo

---

Cheat sheet

• Hero photo nặng → AVIF (+ WebP/JPEG)
• UI / chữ / mock → WebP high-q hoặc lossless
• Logo → SVG
• Social OG → JPEG/PNG
• Không có pipeline AVIF → WebP là default đúng
• Cần chỉnh quality nhanh, không upload → Kawa image-compress

AVIF không “thay thế WebP hoàn toàn”. Hai format sống cùng trong <picture> — chọn theo asset và constraint team, không theo slogan blog nước ngoài.

Liên kết liên quan

• Nén ảnh WebP — A/B WebP / JPEG local
• WebP quality settings — slider, chữ mờ, checklist landing
• Danh sách công cụ