WebP Và AVIF Là Gì? Cách Chuyển Ảnh Sang Định Dạng Mới

WebP và AVIF là gì, khác JPEG và PNG ở điểm nào?

WebP và AVIF là hai định dạng ảnh có khả năng nén và giữ chất lượng vượt JPEG, PNG, theo tài liệu Lighthouse của Google. Cùng một tấm ảnh, tệp WebP hoặc AVIF nhẹ hơn nên tải nhanh hơn và tốn ít dữ liệu di động hơn. WebP có cả hai kiểu nén: không mất dữ liệu và có mất dữ liệu.

Trang thực hành SEO hình ảnh của Google liệt kê các định dạng Google Tìm kiếm hỗ trợ: BMP, GIF, JPEG, PNG, WebP, SVG và AVIF.

Đổi sang WebP hoặc AVIF là giữ nguyên tấm ảnh, chỉ đổi cách tệp được nén.

Vì sao chuyển ảnh sang WebP, AVIF giúp trang nhanh hơn?

Chuyển ảnh sang WebP, AVIF giúp trang nhanh hơn vì trình duyệt phải tải ít byte hơn cho cùng số ảnh. Tài liệu Lighthouse ghi ảnh ở hai định dạng này tải nhanh hơn và tốn ít dữ liệu di động hơn ảnh JPEG, PNG. Ảnh lớn nhất ở màn hình đầu nhẹ đi thì chỉ số LCP cũng dễ đạt hơn.

Ảnh ở màn hình đầu thường là phần tử LCP của trang. Cách xử lý riêng cho phần tử đó nằm ở bài tối ưu LCP. Ảnh nằm ngoài màn hình đầu thì đi cùng lazy loading.

Định dạng mới làm nhẹ từng tấm ảnh, lazy loading hoãn những tấm chưa cần. Hai việc bổ sung cho nhau.

Chuyển ảnh sang WebP, AVIF bằng những cách nào?

Chuyển ảnh sang WebP có hai cách quen dùng theo web.dev: công cụ dòng lệnh cwebp cho dự án nhỏ hoặc chuyển một lần, và plugin Imagemin WebP cho dự án có bước build. Với WordPress, tài liệu Lighthouse gợi ý dùng plugin hoặc dịch vụ tự đổi ảnh tải lên sang định dạng phù hợp.

Checklist tốc độ nội bộ của Danh Nolan đặt thêm một mốc: ảnh sau khi nén WebP không quá 200 KB. Đây là chuẩn làm việc riêng, Google không đặt con số này.

Chọn một cách chuyển chạy tự động, để ảnh mới tải lên cũng được đổi định dạng.

Đặt ảnh dự phòng cho trình duyệt cũ như thế nào?

Đặt ảnh dự phòng bằng thẻ picture: bên trong là các thẻ source khai ảnh AVIF, WebP, cuối cùng là thẻ img trỏ tới ảnh JPEG hoặc PNG. Trình duyệt dùng source đầu tiên có định dạng nó hỗ trợ. Trình duyệt không hiểu picture thì bỏ qua và chỉ đọc thẻ img.

Ba luật của thẻ picture theo web.dev

• Định dạng ưu tiên đứng trước: source của định dạng muốn dùng nhất đặt đầu tiên, thuộc tính type ghi đúng kiểu MIME của ảnh.
• Thẻ img luôn có mặt: đặt cuối cùng, sau mọi thẻ source, và trỏ tới định dạng trình duyệt nào cũng đọc được.
• Thuộc tính đặt trên img: alt, width, height và loading khai trên thẻ img, không khai trên source.

Tài liệu Lighthouse lưu ý ảnh WebP, AVIF không chạy trên iPhone dưới iOS 16, nên ảnh dự phòng vẫn cần. Hướng dẫn gốc ở bài Use WebP images của web.dev.

Có thẻ img dự phòng thì không trình duyệt nào bị mất ảnh.

Kiểm tra website đã dùng WebP, AVIF chưa bằng cách nào?

Kiểm tra website đã dùng WebP, AVIF chưa bằng báo cáo Lighthouse hoặc PageSpeed Insights. Lighthouse lấy từng ảnh BMP, JPEG, PNG trên trang, thử đổi sang WebP, ước dung lượng AVIF rồi báo số byte có thể bớt. Ảnh nào bớt được dưới 8 KiB thì không bị nêu tên.

Hai cách kiểm

• Lighthouse: đọc mục Serve images in modern formats. Từ Lighthouse 13, mục này nằm trong phần Improve image delivery.
• Chrome DevTools: mở tab Network, lọc theo Img và đọc cột Type của từng ảnh.

Cách tính của mục kiểm này nằm ở tài liệu Lighthouse về định dạng ảnh.

Báo cáo không còn nêu ảnh nào ở mục định dạng ảnh là trang đã qua bước này.

WebP, AVIF nằm ở đâu trong bảng chuẩn SQA-200?

Chuyển ảnh sang WebP, AVIF là mục P1.06 trong bảng chuẩn SQA-200, thuộc trụ cột I về kỹ thuật và Core Web Vitals, trọng số 1 điểm. Chuẩn đạt của mục này: chuyển ảnh raster sang định dạng WebP hoặc AVIF với mức nén phù hợp. Mục này đi cùng nhóm mục về nén, lazy loading và CSS của trụ cột.

Các mục đứng cạnh P1.06 trong trụ cột I

• P1.04 TTFB Server Response: tTFB dưới 300 ms nhờ cache ở máy chủ, tối ưu PHP và chỉ mục cơ sở dữ liệu.
• P1.05 Gzip / Brotli Compression: bật nén Brotli hoặc Gzip trên máy chủ để giảm dung lượng HTML, CSS, JS khi truyền.
• P1.07 Native Lazy Loading: đặt loading="lazy" cho mọi ảnh và iframe nằm ngoài màn hình đầu.
• P1.08 Critical CSS Inline: nhúng thẳng CSS của màn hình đầu vào trang để không chặn hiển thị.

Toàn bộ 99 mục kiểm, chuẩn đạt và điểm từng mục nằm ở bài SQA-200 là gì, mục này ở dòng P1.06 WebP / AVIF Images.

P1.06 đạt khi ảnh raster của website được phục vụ ở định dạng WebP hoặc AVIF, kèm ảnh dự phòng.

Người làm website hay hỏi gì về WebP và AVIF?

Người làm website hay hỏi ba câu về WebP và AVIF: nên chọn định dạng nào trước, đổi định dạng có làm ảnh xấu đi không, và Google có lập chỉ mục ảnh WebP, AVIF không. Ba câu trả lời dưới đây lấy từ tài liệu của Google và web.dev.

Nên chọn WebP hay AVIF trước?

Bắt đầu với WebP vì các trình duyệt lớn bản mới đều hỗ trợ: Chrome, Firefox, Safari, Edge, Opera. AVIF cho tệp nhỏ hơn ở cùng mức chất lượng nhưng hỗ trợ hẹp hơn. Website có công cụ tạo nhiều định dạng thì khai AVIF trước, WebP sau, JPEG hoặc PNG cuối cùng trong thẻ picture.

Đổi sang WebP có làm ảnh xấu đi không?

Tùy kiểu nén bạn chọn. Theo web.dev, WebP có nén không mất dữ liệu, giữ nguyên từng điểm ảnh, và nén có mất dữ liệu, giảm dung lượng nhiều hơn nhưng có thể giảm chất lượng. Mức chất lượng chỉnh từ 0 tới 100. Nên thử vài mức trên ảnh thật rồi chọn mức mắt thường không thấy khác.

Google có lập chỉ mục ảnh WebP và AVIF không?

Có. Trang thực hành SEO hình ảnh của Google liệt kê WebP và AVIF trong các định dạng Google Tìm kiếm hỗ trợ, bên cạnh BMP, GIF, JPEG, PNG và SVG. Google cũng khuyên đuôi tên tệp khớp với loại tệp. Ảnh khai trong thẻ picture cần có thẻ img với thuộc tính src làm dự phòng.

WebP trước, AVIF khi có công cụ, và luôn có ảnh dự phòng trong thẻ img.