Tối ưu hóa hình ảnh

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Quy tắc này kích hoạt khi PageSpeed Insights phát hiện rằng các hình ảnh trên trang có thể được tối ưu hóa để 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 phần lớn 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ể giúp cải thiện hiệu suất và tiết kiệm byte lớn nhất: trình duyệt phải tải càng ít byte thì 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à kết xuất nội dung trên màn hình càng nhanh trên màn hình.

Đề xuất

Việc tìm định dạng và chiến lược tối ưu hóa tối ưu cho tài sản hình ảnh của bạn cần phải được phân tích kỹ lưỡng trên nhiều phương diện: loại dữ liệu đang được mã hóa, khả năng định dạng hình ảnh, chế độ cài đặt chất lượng, độ phân giải và các phương diện khác. Ngoài ra, bạn cần xem xét liệu một số hình ảnh có được phân phát 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 thành phần được điều chỉnh theo tỷ lệ cho từng loại thiết bị.

Tính năng tối ưu hóa cho mọi loại hình ảnh

Tối ưu hoá cho ảnh GIF, PNG và JPEG

Các định dạng GIF, PNGJPEG giúp 96% toàn bộ lưu lượng truy cập hình ảnh trên Internet. Nhờ mức độ phổ biến, PageSpeed Insights cung cấp các đề xuất tối ưu hóa cụ thể. Để thuận tiện cho bạn, bạn có thể tải hình ảnh được tối ưu hóa trực tiếp xuống từ PageSpeed Insights (đang sử dụng thư viện tối ưu hóa hình ảnh từ 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 thực hiện để áp dụng các tính năng tối ưu hóa tương tự – xem hướng dẫn mẫu bên dưới.

Nếu bạn sử dụng công cụ của bên thứ ba, xin lưu ý rằng việc chuyển đổi có thể làm cho hình ảnh của bạn lớn hơn nếu hình ảnh đã được tối ưu hoá rất tốt. Nếu điều đó xảy ra, vui lòng sử dụng hình ảnh gốc của bạn.

GIFPNG là các định dạng không bị mất, trong đó quá trình nén không thực hiện bất kỳ sửa đổi hình ảnh nào đối với hình ảnh. Đối với ảnh tĩnh, PNG đạt được tỷ lệ nén tốt hơn với chất lượng hình ảnh tốt hơn. Đối với hình ảnh động, hãy cân nhắc sử dụng phần tử video thay vì ảnh GIF để đạt được độ nén tốt hơn.

  • Luôn chuyển đổi ảnh GIF thành PNG trừ phi ảnh gốc là ảnh động hoặc rất nhỏ (ít hơn vài trăm byte).
  • Đối với cả ảnh GIF và PNG, hãy xóa kênh alpha nếu tất cả các pixel đều bị mờ.

Ví dụ: bạn có thể sử dụng chuyển đổi tệp nhị phân để tối ưu hóa hình ảnh GIF và PNG bằng lệnh sau (không bắt buộc phải có các thông số bên trong dấu ngoặc):

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png

cốcppng.png
cuppa.png (1.763 byte)

convert cuppa.png -strip cuppa_converted.png

cốcpa_conversion.png
cuppa_convert.png (856 byte)

JPEG là định dạng mất dữ liệu. Quá trình nén xóa các chi tiết hình ảnh, nhưng tỷ lệ nén có thể lớn hơn 10 lần so với GIF hoặc PNG.

  • Hãy giảm chất lượng xuống 85 nếu cao hơn. Với chất lượng lớn hơn 85, hình ảnh sẽ nhanh chóng lớn hơn trong khi cải thiện hình ảnh rất nhỏ.
  • Giảm tần số lấy mẫu Chroma xuống mức 4:2:0 vì hệ thống hình ảnh của con người ít nhạy cảm hơn với màu sắc so với độ sáng.
  • Sử dụng định dạng lũy tiến cho những hình ảnh có hơn 10 nghìn byte. JPEG tiến bộ thường có tỷ lệ nén cao hơn JPEG đối với hình ảnh lớn và có lợi ích là kết xuất dần dần.
  • Sử dụng hệ màu thang màu xám nếu hình ảnh ở dạng đen trắng.

Ví dụ: bạn có thể sử dụng chuyển đổi tệp nhị phân để tối ưu hóa hình ảnh JPEG bằng lệnh sau (không bắt buộc phải có các thông số bên trong dấu ngoặc):

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

đố.jpg
puzzle.jpg (13.501 byte)

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

đố_đổi.jpg.jpg
puzzle_conversions.jpg (4.599 byte)

Ý kiến phản hồi

Trang này có hữu ích không?