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 biết mức tiết kiệm tiềm năng khi phân phát các 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à những định dạng hình ảnh có đặc điểm nén và chất lượng vượt trội so với các định dạng JPEG và PNG cũ. Việc mã hoá hình ảnh ở 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à tiêu tốn ít dữ liệu di động hơn.
AVIF được hỗ trợ trong Chrome, Firefox và Opera, đồng thời có kích thước tệp nhỏ hơn so với các định dạng khác có cùng chế độ cài đặt chất lượng. Hãy xem Lớp học lập trình về việc phân phát hình ảnh AVIF để biết thêm thông tin về AVIF.
WebP được 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 khả năng nén có tổn hao và không tổn hao tốt hơn cho hình ảnh trên web. Hãy 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ền có thể tiết kiệm được
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 chuyển đổi.
Khả năng tương thích với trình duyệt
WebP được các phiên bản mới nhất của Chrome, Firefox, Safari, Edge và Opera hỗ trợ, trong khi khả năng hỗ trợ AVIF bị hạn chế hơn. Bạn sẽ cần phân phát hình ảnh PNG hoặc JPEG dự phòng để hỗ trợ các trình duyệt cũ. Hãy xem phần Làm cách nào để phát hiện trình duyệt có hỗ trợ WebP hay không? để 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ợ định dạng hình ảnh hay không.
Để xem trình duyệt hiện tại hỗ trợ từng định dạng hiện đại, hãy xem các mục bên dưới:
Hướng dẫn cụ thể theo 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 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 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 trên 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 trình bổ trợ 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
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 những định dạng hình ảnh mới.
iPhone
Xin lưu ý rằng hình ảnh webp, avif và video webm sẽ không hoạt động trên iPhone chạy iOS 16 trở xuống.
WordPress
Hãy cân nhắc sử dụng một trình bổ trợ hoặc dịch vụ tự động chuyển đổi hình ảnh đã tải lên sang định dạng tối ưu.