Quy tắc này sẽ kích hoạt khi PageSpeed Insights phát hiện rằng hình ảnh trên trang có thể được tối ưu hoá để giảm kích thước tệp mà không ảnh hưởng đáng kể đến chất lượng hình ảnh.
Tổng quan
Hình ảnh thường chiếm hầu hết byte được tải xuống trên một trang. Do đó, việc tối ưu hoá hình ảnh thường có thể mang lại một số cải tiến về hiệu suất và tiết kiệm byte lớn nhất: trình duyệt phải tải xuống càng ít byte, băng thông của máy khách càng phải cạnh tranh ít hơn và trình duyệt có thể tải xuống và hiển thị nội dung trên màn hình càng nhanh.
Đề xuất
Để tìm định dạng và chiến lược tối ưu hoá tối ưu cho thành phần hình ảnh, bạn cần phân tích cẩn thận trên nhiều phương diện: loại dữ liệu được mã hoá, khả năng định dạng hình ảnh, chế độ cài đặt chất lượng, độ phân giải, v.v. Ngoài ra, bạn cần xem xét liệu một số hình ảnh có được phân phối tốt nhất ở định dạng vectơ hay không, liệu có thể đạt được hiệu ứng mong muốn thông qua CSS hay không và cách phân phối nội dung được điều chỉnh theo tỷ lệ thích hợp cho từng loại thiết bị.
Tối ưu hoá cho mọi loại hình ảnh
- Làm theo các phương pháp hay nhất để phân phát hình ảnh thích ứng
- Làm theo danh sách kiểm tra việc tối ưu hoá hình ảnh cho từng hình ảnh
Tối ưu hoá cho hình ảnh GIF, PNG và JPEG
Các định dạng GIF, PNG và JPEG chiếm 96% toàn bộ lưu lượng truy cập hình ảnh trên Internet. Nhờ sự phổ biến của mô hình này, PageSpeed Insights cung cấp các đề xuất tối ưu hóa cụ thể. Để thuận tiện, bạn có thể tải hình ảnh được tối ưu hoá xuống ngay từ PageSpeed Insights (sử dụng thư viện tối ưu hoá hình ảnh trên trang modpagespeed.com).
Bạn cũng có thể sử dụng các công cụ như tệp nhị phân chuyển đổi do ImageMagick tạo để có thể áp dụng các cách tối ưu hoá tương tự – xem hướng dẫn mẫu bên dưới.
Nếu bạn sử dụng các công cụ của bên thứ ba, xin lưu ý rằng việc chuyển đổi này có thể làm cho hình ảnh của bạn lớn hơn nếu hình ảnh của bạn đã được tối ưu hóa rất tốt. Nếu điều đó xảy ra, vui lòng sử dụng bản gốc của bạn.
GIF và PNG là các định dạng không tổn hao, trong đó quá trình nén không thực hiện bất kỳ sửa đổi trực quan nào đối với hình ảnh. Đối với ảnh tĩnh, PNG đạt tỷ lệ nén tốt hơn với chất lượng hình ảnh tốt hơn. Đối với ảnh động, hãy cân nhắc sử dụng phần tử video thay vì ảnh GIF để nén tốt hơn.
- Luôn chuyển đổi GIF thành PNG trừ phi ảnh gốc là ảnh động hoặc rất nhỏ (dưới vài trăm byte).
- Đối với cả ảnh GIF và PNG, hãy xoá kênh alpha nếu tất cả các pixel đều mờ.
Ví dụ: bạn có thể sử dụng chuyển đổi tệp nhị phân để tối ưu hoá hình ảnh GIF và PNG bằng lệnh sau (các thông số bên trong dấu ngoặc là không bắt buộc):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG là định dạng có tổn hao. Quá trình nén sẽ loại bỏ các chi tiết trực quan của hình ảnh, nhưng tỷ lệ nén có thể lớn hơn 10 lần so với ảnh GIF hoặc PNG.
- Hãy giảm chất lượng xuống 85 nếu chất lượng cao hơn. Với chất lượng lớn hơn 85, hình ảnh sẽ lớn hơn nhanh chóng, trong khi hình ảnh không được cải thiện nhiều.
- Giảm việc lấy mẫu sắc độ xuống còn 4:2:0 vì hệ thống thị giác của con người ít nhạy cảm hơn với màu sắc so với độ chói.
- Sử dụng định dạng tăng dần cho hình ảnh trên 10 nghìn byte. Đối với hình ảnh lớn, định dạng JPEG tăng dần thường có tỷ lệ nén cao hơn so với JPEG cơ sở đối với hình ảnh lớn và có lợi ích là hiển thị dần.
- Sử dụng hệ màu thang màu xám nếu hình ảnh có màu đen và trắng.
Ví dụ: bạn có thể sử dụng chuyển đổi tệp nhị phân để tối ưu hoá hình ảnh JPEG bằng lệnh sau (tham số bên trong dấu ngoặc là không bắt buộc):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
Ý kiến phản hồi
Trang này có hữu ích không?