Hướng dẫn chi tiết phục vụ ảnh định dạng thế hệ mới

[Nhật Quang]

Lựa chọn định dạng ảnh phù hợp là một yếu tố thường bị bỏ qua nhưng quan trọng trong tối ưu hóa hình ảnh. Bài viết này hướng dẫn cách phục vụ ảnh ở định dạng thế hệ mới (WebP, AVIF), kiểm tra hỗ trợ trình duyệt và khi nào nên dùng từng loại.

Tại sao định dạng ảnh thế hệ mới quan trọng?​

Chọn đúng loại tệp ảnh giúp giảm kích thước, tăng tốc độ tải trang và cải thiện trải nghiệm người dùng. Kiểm tra "Serve images in next-gen formats" của Lighthouse là một trong những chỉ báo hiệu năng web quan trọng để biết bạn cần tối ưu ảnh như thế nào.

/assets/images/debugbear-runs-fast-c95bbfdf0b3851cbef46e2906a2918eb.png

Next‑gen là gì và những lựa chọn phổ biến​

"Next‑gen" (thế hệ mới) là các định dạng ảnh hướng tới kích thước nhỏ hơn và hỗ trợ tính năng hình ảnh tiên tiến. Hiện hai định dạng được hỗ trợ rộng rãi nhất là WebP và AVIF, cả hai đều có biến thể nén mất dữ liệu (lossy) và không mất dữ liệu (lossless).

Có một định dạng khác là JPEG XL rất tiến bộ về mặt nén và tính năng (animation, layers, alpha, depth maps…), nhưng do Google Chrome đã gỡ hỗ trợ, mức phủ trình duyệt hiện thấp ( với nguồn WebP hoặc AVIF mà không dùng .

Chuyển đổi ảnh sang định dạng mới​

Cần chuyển đổi tệp ảnh sang WebP hoặc AVIF. Hiện có nhiều công cụ và dịch vụ để thực hiện chuyển đổi này (công cụ dòng lệnh, plugin, CDN, dịch vụ trực tuyến). Khi chuyển đổi, nhớ phân biệt:

• Ảnh nguồn mất dữ liệu (JPEG) nên chuyển bằng thuật toán nén mất dữ liệu của WebP/AVIF để tiết kiệm nhất.
• Ảnh nguồn không mất dữ liệu (PNG) có thể thử nén lossless, nhưng đôi khi tối ưu PNG vẫn tốt hơn.

Khi nào nên dùng lossless hoặc lossy?​

Không phải lúc nào chuyển sang định dạng thế hệ mới cũng có lợi. Lossy WebP/AVIF thường tiết kiệm nhiều dung lượng và vẫn giữ chất lượng tốt cho ảnh chụp. Tuy nhiên, biến thể lossless của WebP/AVIF đôi khi không tốt hơn các công cụ tối ưu PNG chuyên dụng.

Kiểm tra cần thiết bằng Lighthouse và công cụ khác​

Chạy kiểm tra trang bằng Lighthouse để xem điểm "Serve images in next-gen formats". Nếu nhận cảnh báo vàng hoặc đỏ, việc chuyển sang WebP/AVIF thường mang lại lợi ích mạnh mẽ về hiệu năng.

/assets/images/lighthouse-warning-next-gen-images-b9d3b9c44cc822653adbbc69234b1cf9.jpg

Bạn cũng có thể dùng công cụ kiểm tra tốc độ như DebugBear để xem ảnh nào đang làm chậm trang và ảnh hưởng tới Core Web Vitals.

Tóm tắt và khuyến nghị​

• Sử dụng WebP làm lựa chọn an toàn cho hầu hết hình ảnh trên web vì hỗ trợ rộng và hiệu suất tốt.
• Khi cần nén tối đa và hỗ trợ trình duyệt đủ, cân nhắc AVIF (đặc biệt là cho hình chụp và ảnh có chi tiết phức tạp).
• Không mặc định chuyển mọi PNG sang lossless WebP/AVIF; so sánh với trình tối ưu PNG trước khi quyết định.
• Dùng để cung cấp fallback và đảm bảo tương thích cho trình duyệt cũ.
• Luôn kiểm tra bằng Lighthouse và công cụ phân tích để đánh giá lợi ích thực tế của việc chuyển đổi.

Nguồn: https://www.debugbear.com/blog/image-formats