Mục Cơ hội trong báo cáo Lighthouse liệt kê tất cả hình ảnh trên trang không có kích thước phù hợp, cùng với lượng dữ liệu có thể tiết kiệm được tính bằng kibibyte (KiB). Đổi kích thước các 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 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 kết xuất 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 quá trình kiểm tra.
Chiến lược để định kích thước hình ảnh phù hợp
Lý tưởng nhất là trang của bạn không bao giờ phân phát hình ảnh lớn hơn phiên bản được 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 chỉ khiế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 nào sẽ sử dụng trong HTML hoặc CSS bằng các truy vấn nội dung nghe nhìn, kích thước khung nhìn, v.v. Ngoài ra, RespImageLint là một tiện ích đánh dấu hữu ích để xác định các giá trị srcset và sizes tối ưu cho hình ảnh của bạn. Hãy xem bài viết 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.
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ư các 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ơ, như SVG. Với một lượng mã hữu hạn, hình ảnh SVG có thể điều chỉnh theo tỷ lệ cho bất kỳ kích thước nào. Hãy xem phần Thay thế 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á quy trình chuyển đổi hình ảnh sang nhiều định dạng. Ngoài ra, còn có cá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 mình.
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 sẽ sử dụng dựa trên kích thước màn hình. Xem thêm nội dung Hình ảnh thích ứng có srcset, kích thước và chiều cao.
Angular
Cân nhắc sử dụng tiện ích BreakpointObserver trong Bộ công cụ phát triển thành phần (CDK) để quản lý các điểm ngắt hình ảnh.
Drupal
Đảm bảo rằng bạn đang sử dụng Kiểu hình ảnh thích ứng gốc do Drupal cung cấp. Hãy sử dụng Kiểu hình ảnh thích ứng khi hiển thị các trường hình ảnh thông qua chế độ xem, chế độ xem hoặc hình ảnh được tải lên bằng trình chỉnh sửa WYSIWYG.
Gatsby
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. Thư viện 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 đa phương tiện để đảm bảo có các kích thước hình ảnh theo yêu cầu, 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ả các kích thước dành cho điểm ngắt thích ứng). Tránh sử dụng hình ảnh có Full Size trừ khi những hình ảnh đó có kích thước phù hợp. Xem bài viết Chèn hình ảnh vào bài đăng và trang.