WebP quality bao nhiêu? | Chữ UI bị mờ và checklist trước khi ship landing

Lighthouse bảo “serve WebP”. Designer bảo chữ trên mock dashboard “như cháo”. Cả hai đúng theo metric của mình: byte xuống vs cạnh chữ còn đọc được. Freelancer VN ship landing cho khách SME / agency thường dính đúng điểm này — compress một phát Q60 cho mọi PNG export từ Figma.

Bài này là quality vs kích thước và checklist trước go-live landing — không phải “WebP là gì”.

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

• Chọn lossy vs lossless theo loại asset
• Biết điểm quality khởi đầu cho hero, thumb, UI, OG
• Hiểu vì sao chữ UI chết sớm hơn ảnh trời
• Quy trình resize → encode → preview đúng
• Checklist bàn giao landing (CDN, srcset, không re-encode 5 lần)

---

Vì sao chữ bị mờ?

WebP lossy (và JPEG) cắt thông tin “khó thấy” để giảm file. Cạnh chữ và UI flat là tần số cao + tương phản mạnh — codec làm mềm / ringing trước khi bạn kịp nhận ra mây trên ảnh hero.

Loại nội dung	Lossy Q thấp	Kết quả thường thấy
Ảnh chụp da / bầu trời	Thường chấp nhận được	Soft nhẹ
Gradient lớn	Banding	Sọc màu
Screenshot UI / code	Nhoè glyph	Ticket “chữ đọc không được”
Logo / icon flat	Halo, răng cưa	Nên lossless hoặc SVG

capture 2880px → WebP q=55          → nhỏ nhưng chữ UI “soup"
capture 2880px → resize 1440px → q=88 → thường NHỎ HƠN và SẮC HƠN

Đừng đoán sharpness từ thumbnail trong File Explorer — mở landing ở viewport thật, zoom 100% vào đoạn label hoặc bảng số.

---

Lossy vs lossless — quyết định nhanh

Q80 WebP ≠ Q80 JPEG. Cùng số trên slider không đảm bảo cùng cảm nhận. So bằng mắt ở đúng display size, hoặc cố định SSIM/dung lượng — đừng copy số từ pipeline JPEG cũ.

---

Điểm khởi đầu quality (rồi phải A/B)

Use case	Lossy WebP	Ghi chú
Hero blog / landing ~1200w	80–85	Kiểm da, trời, banding
Thumb product grid	75–80	Display nhỏ tha thứ hơn
Full-bleed background	82–88	Gradient lộ banding trước
OG / social card	85–90	Overlay chữ cần base sắc
Screenshot UI / docs	85–95 hoặc lossless	Ưu tiên cạnh chữ
Icon / flat	Lossless hoặc SVG	Đừng raster hóa chrome đơn giản

CLI tham khảo:

cwebp -q 82 photo.jpg -o photo.webp
cwebp -lossless ui-shot.png -o ui-shot.webp

---

Case study: landing SME — chữ giá bị mờ

Bối cảnh: Freelance làm landing khoá học / SaaS Việt. Figma export PNG dashboard 2×. CI “compress for web” global quality 60. Lighthouse xanh; trên iPhone khách — số giá và nút CTA đọc khó.

Nguyên nhân: Pipeline coi mọi PNG như ảnh stock. UI text chịu lossy nặng; resize bằng CSS từ 2400px xuống ~360px không cứu sharpness đã mất lúc encode.

Cách xử lý:

1. Tách class asset trong repo: photo, ui, logo.
2. Photo: WebP lossy ~80. UI: lossless WebP hoặc PNG; hoặc lossy ≥88 sau khi resize đúng width.
3. Crop chỉ panel cần show (bỏ wallpaper trống).
4. Preview side-by-side PNG vs WebP trên đoạn chữ — nếu phải nheo mắt thì tăng Q hoặc lossless.
5. Purge CDN (?v=2 hoặc purge URL) — không thì design review vẫn thấy bản mờ cũ.

Bài học: “Một policy Q60 cho cả site” fail cả performance negotiation lẫn design review.

---

Resize là một nửa việc nén

Serving capture Retina vào slot hẹp rồi hạ quality để “đủ nhẹ” là anti-pattern.

1. Crop vùng liên quan.
2. Downscale ≈ 2× CSS width tối đa (Retina).
3. Encode WebP với quality phù hợp class.
4. srcset / sizes theo width thật — đừng chỉ width: 100% trên file 4000px.
5. Giữ master lossless trong design storage; commit derivative web — để recompress khi codec tốt hơn.

<picture>
  <source type="image/avif" srcset="hero-960.avif 960w, hero-1280.avif 1280w" />
  <source type="image/webp" srcset="hero-960.webp 960w, hero-1280.webp 1280w" />
  <img src="hero-1280.jpg" width="1280" height="720" alt="…" />
</picture>

AVIF thường nhỏ hơn trên photo; UI chữ vẫn test — encode chậm và fallback vẫn cần cho audience cũ.

---

Lỗi thường gặp khi ship landing

Sai	Hệ quả
Một Q cho mọi asset	Hero ổn, UI mờ (hoặc ngược lại file phình)
JPEG → WebP → JPEG lại	Generation loss chồng
Xem artifact ở zoom 400%	Over-optimize hoặc panic sai
Quên alpha / icon	Halo quanh logo trong suốt
Re-encode 5 lần trong pipeline	Chữ chết dần
CDN cache bản cũ	“Đã sửa” mà khách vẫn thấy mờ
image-rendering để “fix” WebP mềm	Không cứu được quantizer — chỉ hợp pixel art

---

Quy trình local trước khi đưa vào CI

1. Export master từ design (tránh double JPEG).
2. Resize đúng max width deploy.
3. Thử lossy ~80 cho photo; UI thử cao hơn / lossless.
4. So cạnh chữ @ 100% trên desktop và mobile.
5. Chốt setting theo class → ghi vào README hoặc config Sharp/Squoosh CI.

Dùng Nén ảnh & WebP trên trình duyệt: chỉnh chất lượng, xem trước, tải về — không upload asset khách lên dịch vụ lạ lúc thử nghiệm. Khi team đã thống nhất preview, mới khóa số vào CI.

Tool hỗ trợ nén WebP/JPEG, chỉnh quality / đích KB, xử lý cục bộ — đúng nhu cầu A/B trước ship.

---

Checklist trước khi ship landing

• Asset đã phân loại (photo / UI / logo / OG)
• Đã resize ~2× display trước encode
• Photo: lossy ~75–85; UI chữ: cao hoặc lossless
• Đã xem 100% zoom trên chữ và số, không chỉ hero blur
• srcset / picture đúng width; có fallback nếu cần
• Không re-encode derivative nhiều lần
• CDN purge hoặc version query sau re-export
• Quality per class ghi trong repo (tránh intern hạ Q60)
• Đã A/B nhanh bằng image-compress

---

Cheat sheet quyết định

• Ảnh body / hero photo → lossy mạnh hơn được
• Marketing UI shot → high-q WebP hoặc lossless
• Icon đơn giản → SVG / PNG
• Terminal / code dense → thiên lossless
• Hero lẫn photo + overlay UI → tách layer khi được

Nén không phải cuộc đua “luôn nhỏ hơn”. Screenshot là văn bản dạng bitmap: resize khôn, giữ quality cao cho chữ, rồi mới ăn mừng 40KB tiết kiệm — độc giả thấy chữ mờ lâu trước khi thấy bạn tiết kiệm byte.

Liên kết liên quan

• Nén ảnh WebP — nén / chuyển WebP local, chỉnh chất lượng
• Favicon Generator — icon nhỏ nên SVG/PNG sạch, không lossy nặng
• Danh sách công cụ