Mục Cơ hội của báo cáo Lighthouse liệt kê tất cả hình ảnh có kích thước không phù hợp trên trang cùng với khả năng tiết kiệm được tính bằng kibibyte (KiB). Đổi kích thước những hình ảnh này để tiết kiệm dữ liệu và cải thiện thời gian tải trang:
Cách Lighthouse tính toán hình ảnh quá khổ
Đối với mỗi hình ảnh trên trang, Lighthouse so sánh kích thước của hình ảnh được kết xuất với kích thước của hình ảnh thực tế. Kích thước hiển thị cũng tính đến tỷ lệ pixel của thiết bị. Nếu kích thước kết xuất nhỏ hơn ít nhất 4KiB so với kích thước thực tế, thì hình ảnh đó không vượt qua quy trình kiểm tra.
Chiến lược định kích thước hình ảnh đúng cách
Tốt nhất là trang của bạn không nên phân phát hình ảnh lớn hơn phiên bản hiển thị trên màn hình của người dùng. Mọi kích thước lớn hơn mức đó chỉ dẫn đến lãng phí byte và làm chậm thời gian tải trang.
Chiến lược chính để phân phát hình ảnh có kích thước phù hợp được gọi là "hình ảnh thích ứng". Với hình ảnh thích ứng, bạn tạo nhiều phiên bản của mỗi hình ảnh, sau đó chỉ định phiên bản sẽ sử dụng trong HTML hoặc CSS bằng cách sử dụng truy vấn phương tiện, kích thước khung nhìn, v.v. Ngoài ra, RespImageLint là một bookmarklet hữu ích giúp xác định các giá trị srcset và sizes tối ưu cho hình ảnh của bạn. Xem Phân phát hình ảnh thích ứng để tìm hiểu thêm về các thuộc tính này.
Mạng phân phối nội dung (CDN) hình ảnh là một chiến lược chính khác để phân phát hình ảnh có kích thước phù hợp. Bạn có thể coi CDN hình ảnh như API dịch vụ web để chuyển đổi hình ảnh.
Một chiến lược khác là sử dụng các định dạng hình ảnh dựa trên vectơ, chẳng hạn như SVG. Với một số lượng mã hữu hạn, hình ảnh SVG có thể điều chỉnh theo tỷ lệ theo bất kỳ kích thước nào. Hãy xem phần Thay thế các biểu tượng phức tạp bằng SVG để tìm hiểu thêm.
Các công cụ như gulp-responsive hoặc responsive-images-generator có thể giúp tự động hoá quá trình chuyển đổi hình ảnh thành nhiều định dạng. Ngoài ra, còn có CDN hình ảnh cho phép bạn tạo nhiều phiên bản, khi bạn tải hình ảnh lên hoặc yêu cầu hình ảnh từ trang của bạn.
Hướng dẫn dành riêng cho ngăn xếp
AMP
Sử dụng tính năng hỗ trợ của thành phần amp-img cho srcset để chỉ định thành phần hình ảnh cần sử dụng dựa trên kích thước màn hình. Xem thêm bài viết Hình ảnh thích ứng có srcset, kích thước và chiều cao.
Angular
Hãy cân nhắc dùng tiện ích BreakpointObserver trong Component Dev Kit (CDK) để quản lý các điểm ngắt hình ảnh.
Drupal
Sử dụng tính năng Kiểu hình ảnh thích ứng tích hợp sẵn (có trong Drupal 8 trở lên) khi hiển thị các trường hình ảnh thông qua chế độ xem, khung hiển thị hoặc hình ảnh được tải lên thông qua trình chỉnh sửa WYSIWYG.
Gatsby
Hãy sử dụng trình bổ trợ gatsby-image để tạo nhiều hình ảnh nhỏ hơn cho điện thoại thông minh và máy tính bảng. Lớp này cũng có thể tạo phần giữ chỗ hình ảnh SVG để tải từng phần một cách hiệu quả.
Joomla
Hãy cân nhắc sử dụng trình bổ trợ hình ảnh thích ứng.
WordPress
Trực tiếp tải hình ảnh lên thông qua thư viện nội dung nghe nhìn để đảm bảo có sẵn kích thước hình ảnh bắt buộc, sau đó chèn hình ảnh từ thư viện nội dung đa phương tiện hoặc sử dụng tiện ích hình ảnh để đảm bảo sử dụng kích thước hình ảnh tối ưu (bao gồm cả kích thước hình ảnh cho điểm ngắt thích ứng). Tránh sử dụng hình ảnh Full Size trừ phi có kích thước phù hợp cho việc sử dụng. Xem Chèn hình ảnh vào bài đăng và trang.