Phần Cơ hội của báo cáo Lighthouse liệt kê tất cả hình ảnh chưa được tối ưu hoá, có thể tiết kiệm được tính bằng kibibyte (KiB). Hãy tối ưu hoá những hình ảnh này để trang tải nhanh hơn và tốn ít dữ liệu hơn:
Cách Lighthouse gắn cờ hình ảnh là có thể tối ưu hoá
Lighthouse thu thập tất cả hình ảnh JPEG hoặc BMP trên trang, đặt mức nén của mỗi hình ảnh là 85, sau đó so sánh phiên bản gốc với phiên bản nén. Nếu mức tiết kiệm tiềm năng từ 4KiB trở lên, Lighthouse sẽ gắn cờ hình ảnh là có thể tối ưu hoá.
Cách tối ưu hoá hình ảnh
Có nhiều bước bạn có thể thực hiện để tối ưu hoá hình ảnh, bao gồm:
- Sử dụng CDN hình ảnh
- Nén hình ảnh
- Thay thế ảnh GIF động bằng video
- Tải từng phần hình ảnh
- Phân phát hình ảnh thích ứng
- Phân phát hình ảnh theo kích thước chính xác
- Sử dụng hình ảnh WebP
Tối ưu hoá hình ảnh bằng các công cụ GUI
Một phương pháp khác là chạy hình ảnh thông qua một trình tối ưu hóa mà bạn cài đặt trên máy tính và chạy dưới dạng GUI (Giao diện người dùng đồ hoạ). Ví dụ: với ImageOptim, bạn kéo và thả hình ảnh vào giao diện người dùng, sau đó công cụ này tự động nén hình ảnh mà không làm ảnh hưởng đáng kể đến chất lượng. Nếu bạn đang chạy một trang web nhỏ và có thể xử lý việc tối ưu hoá tất cả hình ảnh theo cách thủ công, thì tuỳ chọn này có thể phù hợp.
Squoosh là một tùy chọn khác. Squoosh được nhóm Google Web DevRel duy trì.
Hướng dẫn dành riêng cho ngăn xếp
Drupal
Hãy cân nhắc dùng một mô-đun tự động tối ưu hoá và giảm kích thước của hình ảnh tải lên thông qua trang web trong khi vẫn giữ được chất lượng. Ngoài ra, hãy đảm bảo bạn đang sử dụng Kiểu hình ảnh thích ứng tích hợp sẵn của Drupal (có trong Drupal 8 trở lên) cho tất cả hình ảnh hiển thị trên trang web.
Joomla
Hãy cân nhắc sử dụng một trình bổ trợ tối ưu hoá hình ảnh có khả năng nén hình ảnh mà vẫn giữ được chất lượng.
Magento
Hãy cân nhắc sử dụng tiện ích Magento của bên thứ ba giúp tối ưu hoá hình ảnh.
WordPress
Hãy cân nhắc sử dụng một trình bổ trợ của WordPress để tối ưu hoá hình ảnh có khả năng nén hình ảnh mà vẫn giữ được chất lượng.