Phần Cơ hội trong báo cáo Lighthouse liệt kê tất cả hình ảnh ở định dạng hình ảnh cũ, cho thấy các khoản tiết kiệm có thể đạt được khi phân phát phiên bản AVIF của những hình ảnh đó:
Tại sao nên phân phát hình ảnh ở định dạng AVIF hoặc WebP?
AVIF và WebP là các định dạng hình ảnh có đặc tính chất lượng và nén vượt trội so với các định dạng JPEG và PNG trước đó. Mã hoá hình ảnh của bạn ở các định dạng này thay vì JPEG hoặc PNG có nghĩa là hình ảnh sẽ tải nhanh hơn và tốn ít dữ liệu di động hơn.
AVIF được hỗ trợ trong Chrome, Firefox và Opera và cung cấp kích thước tệp nhỏ hơn so với các định dạng khác có cùng cài đặt chất lượng. Xem Lớp học lập trình về phân phát hình ảnh AVIF để tìm hiểu thêm về AVIF.
WebP hỗ trợ trong các phiên bản mới nhất của Chrome, Firefox, Safari, Edge và Opera, đồng thời cung cấp tính năng nén có tổn hao và không tổn hao tốt hơn đối với hình ảnh trên web. Xem bài viết Định dạng hình ảnh mới cho web để biết thêm thông tin về WebP.
Cách Lighthouse tính toán khoản tiết kiệm tiềm năng
Lighthouse thu thập từng hình ảnh BMP, JPEG và PNG trên trang, chuyển đổi từng hình ảnh sang WebP và ước tính kích thước tệp AVIF, báo cáo mức tiết kiệm tiềm năng dựa trên số liệu lượt chuyển đổi.
Khả năng tương thích với trình duyệt
Các phiên bản mới nhất của Chrome, Firefox, Safari, Edge và Opera hỗ trợ định dạng WebP, còn hỗ trợ AVIF thì bị hạn chế hơn. Bạn cần phân phối hình ảnh PNG hoặc JPEG dự phòng để hỗ trợ trình duyệt cũ hơn. Hãy xem bài viết Làm cách nào để phát hiện khả năng hỗ trợ của trình duyệt cho WebP? để biết thông tin tổng quan về các kỹ thuật dự phòng và danh sách bên dưới để biết trình duyệt có hỗ trợ các định dạng hình ảnh.
Để xem khả năng hỗ trợ trình duyệt hiện tại cho từng định dạng hiện đại, hãy xem các mục dưới đây:
Hướng dẫn dành riêng cho ngăn xếp
AMP
Cân nhắc hiển thị tất cả các thành phần amp-img ở định dạng WebP, đồng thời chỉ định một phương án dự phòng thích hợp cho các trình duyệt khác.
Drupal
Hãy cân nhắc việc cài đặt và định cấu hình một mô-đun để tận dụng các định dạng hình ảnh WebP trong trang web của bạn. Những mô-đun như vậy sẽ tự động tạo một phiên bản WebP của hình ảnh mà bạn đã tải lên để tối ưu hoá thời gian tải.
Joomla
Hãy cân nhắc sử dụng một plugin hoặc dịch vụ tự động chuyển đổi hình ảnh đã tải lên sang định dạng tối ưu.
Magento
Hãy cân nhắc tìm kiếm nhiều tiện ích của bên thứ ba trên Magento Marketplace để tận dụng các định dạng hình ảnh mới.
iPhone
Xin lưu ý rằng webp, hình ảnh avif và video webm sẽ không hoạt động trên iPhone dưới iOS 16.
WordPress
Hãy cân nhắc sử dụng một plugin hoặc dịch vụ tự động chuyển đổi hình ảnh đã tải lên sang định dạng tối ưu.