Chọn đúng mức độ nén

Ilya Grigorik

Jeremy Wagner

Hình ảnh thường chiếm hầu hết các byte được tải xuống trên trang web và cũng thường chiếm một lượng không gian trực quan đáng kể. Do đó, việc tối ưu hoá hình ảnh thường có thể mang lại một số điểm cải tiến về hiệu suất và tiết kiệm byte lớn nhất cho trang web của bạn: trình duyệt phải tải xuống càng ít byte, băng thông của ứng dụng càng ít cạnh tranh và trình duyệt có thể tải xuống và hiển thị nội dung hữu ích trên màn hình càng nhanh.

Tối ưu hoá hình ảnh vừa là nghệ thuật vừa khoa học: nghệ thuật vì không có câu trả lời chắc chắn nào về cách tốt nhất để nén một hình ảnh riêng lẻ, và một khoa học vì có nhiều kỹ thuật và thuật toán được phát triển tốt có thể làm giảm đáng kể kích thước của hình ảnh. Để tìm ra chế độ cài đặt tối ưu cho hình ảnh của mình, bạn cần phải phân tích kỹ lưỡng theo nhiều chiều: khả năng định dạng, nội dung dữ liệu được mã hoá, chất lượng, kích thước pixel, v.v.

Tối ưu hoá ảnh vectơ

Tất cả trình duyệt hiện đại đều hỗ trợ Đồ hoạ vectơ có thể mở rộng (SVG). Đây là định dạng hình ảnh dựa trên XML dành cho đồ hoạ hai chiều. Bạn có thể nhúng mã đánh dấu SVG trực tiếp trên trang hoặc dưới dạng tài nguyên bên ngoài. Hầu hết phần mềm vẽ dựa trên vectơ đều có thể tạo tệp SVG hoặc bạn có thể viết các tệp đó trực tiếp trong trình chỉnh sửa văn bản bạn yêu thích.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

Ví dụ trên kết xuất hình tròn đơn giản dưới đây với đường viền màu đen và nền đỏ, và được xuất từ Adobe Illustrator.

<?xml version="1.0" encrypted="utf-8"?>

Như bạn có thể biết, tệp này chứa rất nhiều siêu dữ liệu, chẳng hạn như thông tin về lớp, nhận xét và không gian tên XML thường không cần thiết để hiển thị nội dung trong trình duyệt. Do đó, bạn nên giảm kích thước tệp SVG bằng cách chạy thông qua một công cụ như SVGO.

Cụ thể, SVGO sẽ giảm 58% kích thước của tệp SVG ở trên do Illustrator tạo ra, giảm từ 470 xuống còn 199 byte.

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>

Vì SVG là định dạng dựa trên XML, nên bạn cũng có thể áp dụng tính năng nén GZIP để giảm dung lượng truyền dữ liệu. Hãy đảm bảo máy chủ của bạn được định cấu hình để nén các thành phần SVG!

Hình ảnh đường quét chỉ đơn giản là một lưới hai chiều gồm các "pixel" riêng lẻ – ví dụ: hình ảnh 100x100 pixel là một chuỗi gồm 10.000 pixel. Lần lượt, mỗi pixel lưu trữ các giá trị "RGBA": (R) kênh đỏ, (G) kênh xanh lục, (B) kênh xanh dương và (A) kênh alpha (độ trong suốt).

Trong nội bộ, trình duyệt phân bổ 256 giá trị (sắc thái) cho mỗi kênh, có nghĩa là 8 bit trên mỗi kênh (2 ^ 8 = 256) và 4 byte cho mỗi pixel (4 kênh x 8 bit = 32 bit = 4 byte). Do đó, nếu biết kích thước của lưới, chúng ta có thể dễ dàng tính toán kích thước tệp:

• Hình ảnh 100x100 pixel bao gồm 10.000 pixel
• 10.000 pixel x 4 byte = 40.000 byte
• 40.000 byte / 1024 = 39 KB

39 KB cho hình ảnh 100x100 pixel có vẻ không phải là vấn đề lớn, nhưng kích thước tệp nhanh chóng tăng đột biến đối với các hình ảnh lớn hơn, khiến thành phần hình ảnh vừa chậm vừa tốn kém khi tải xuống. Cho đến nay, bài đăng này chỉ tập trung vào định dạng hình ảnh "không nén". Rất may là có nhiều biện pháp giúp giảm kích thước tệp hình ảnh.

Một chiến lược đơn giản là giảm "độ sâu bit" của hình ảnh từ 8 bit trên mỗi kênh xuống bảng màu nhỏ hơn: 8 bit mỗi kênh mang lại cho chúng ta 256 giá trị trên mỗi kênh và tổng cộng 16.777.216 (256 ^ 3) màu. Nếu bạn giảm bảng màu xuống còn 256 màu thì sao? Sau đó, bạn sẽ chỉ cần tổng cộng 8 bit cho các kênh RGB và lưu ngay lập tức hai byte mỗi pixel, đó là tiết kiệm nén 50% so với định dạng 4 byte ban đầu mỗi pixel!

Các cảnh phức tạp với hiệu ứng chuyển đổi màu dần dần (ví dụ: độ dốc hoặc bầu trời) yêu cầu bảng màu lớn hơn để tránh các cấu phần phần mềm hình ảnh như bầu trời tạo pixel trong thành phần 5 bit. Mặt khác, nếu hình ảnh chỉ sử dụng một vài màu, thì một bảng màu lớn chỉ làm lãng phí một chút quý giá!

Tiếp theo, sau khi đã tối ưu hoá dữ liệu được lưu trữ theo từng pixel riêng lẻ, bạn có thể trở nên thông minh hơn và cũng có thể xem các pixel lân cận: hoá ra, nhiều hình ảnh và đặc biệt là ảnh có nhiều pixel ở gần với màu sắc tương tự nhau, ví dụ: bầu trời, hoạ tiết lặp lại, v.v. Sử dụng thông tin này để làm lợi thế, bộ nén có thể áp dụng mã hoá delta, trong đó thay vì lưu trữ các giá trị riêng lẻ cho mỗi pixel, bạn có thể lưu trữ sự khác biệt giữa các pixel lân cận: nếu các pixel lân cận giống nhau, thì delta là "0" và bạn chỉ cần lưu trữ một bit duy nhất! Nhưng tại sao lại dừng ở đó...

Mắt người có mức độ nhạy cảm khác nhau với các màu khác nhau: bạn có thể tối ưu hoá phương thức mã hoá màu để tính đến điều này bằng cách giảm hoặc tăng bảng màu cho các màu đó. Pixel "Lân cận" tạo thành lưới hai chiều. Điều này có nghĩa là mỗi pixel có nhiều thành phần lân cận: bạn có thể sử dụng thông tin này để cải thiện hơn nữa phương thức mã hoá delta. Thay vì chỉ xem các vùng lân cận của mỗi pixel, bạn có thể xem các khối pixel lân cận lớn hơn và mã hoá các khối khác nhau với các chế độ cài đặt khác nhau.

Như bạn có thể biết, việc tối ưu hoá hình ảnh rất nhanh chóng (hoặc thú vị, tuỳ thuộc vào góc nhìn của bạn) và là một lĩnh vực nghiên cứu học thuật và thương mại tích cực. Hình ảnh chiếm nhiều byte và có rất nhiều giá trị trong việc phát triển các kỹ thuật nén ảnh tốt hơn! Nếu bạn muốn tìm hiểu thêm, hãy truy cập trang Wikipedia hoặc xem sách trắng về kỹ thuật nén WebP để xem ví dụ thực tế.

Xin nhắc lại một lần nữa, đây là tất cả những điều tuyệt vời nhưng cũng rất mang tính học thuật: giải pháp này giúp bạn tối ưu hoá hình ảnh trên trang web như thế nào? Vâng, điều quan trọng là phải hiểu hình dạng của vấn đề: pixel RGBA, độ sâu bit và các kỹ thuật tối ưu hoá khác nhau. Tất cả các khái niệm này đều rất quan trọng cần hiểu và lưu ý trước khi bạn tìm hiểu sâu về các cuộc thảo luận về các định dạng hình ảnh đường quét khác nhau.

Nén hình ảnh không tổn hao và có tổn hao

Đối với một số loại dữ liệu nhất định, chẳng hạn như mã nguồn của một trang hoặc tệp thực thi, điều quan trọng là trình nén không được thay đổi hay làm mất bất kỳ thông tin gốc nào: một bit dữ liệu bị thiếu hoặc không chính xác có thể làm thay đổi hoàn toàn ý nghĩa nội dung của tệp hoặc tệ hơn là phá vỡ hoàn toàn nội dung của tệp. Đối với một số loại dữ liệu khác, chẳng hạn như hình ảnh, âm thanh và video, việc cung cấp bản trình bày "gần đúng" của dữ liệu gốc có thể hoàn toàn được chấp nhận.

Trên thực tế, do cách hoạt động của mắt, chúng ta thường có thể loại bỏ một số thông tin về từng pixel để giảm kích thước tệp của hình ảnh — ví dụ: mắt chúng ta có độ nhạy khác nhau với các màu khác nhau, có nghĩa là chúng ta có thể sử dụng ít bit hơn để mã hoá một số màu. Do đó, một quy trình tối ưu hoá hình ảnh điển hình bao gồm hai bước cấp cao:

1. Hình ảnh được xử lý bằng bộ lọc bị suy hao giúp loại bỏ một số dữ liệu pixel.
2. Hình ảnh được xử lý bằng bộ lọc không mất dữ liệu nén dữ liệu pixel.

Bước đầu tiên là không bắt buộc và thuật toán chính xác sẽ phụ thuộc vào định dạng hình ảnh cụ thể, nhưng bạn cần hiểu rằng bất kỳ hình ảnh nào cũng có thể trải qua bước nén có tổn hao để giảm kích thước. Trên thực tế, sự khác biệt giữa các định dạng hình ảnh khác nhau (chẳng hạn như GIF, PNG, JPEG và các định dạng khác) là ở sự kết hợp của các thuật toán cụ thể mà các định dạng đó sử dụng (hoặc bỏ qua) khi áp dụng các bước tổn hao và không tổn hao.

Vậy cấu hình "tối ưu" của phương pháp tối ưu hoá có tổn hao và không tổn hao là gì? Câu trả lời phụ thuộc vào nội dung hình ảnh và các tiêu chí của riêng bạn, chẳng hạn như sự đánh đổi giữa kích thước tệp và cấu phần phần mềm do nén có tổn hao đưa ra: Trong một số trường hợp, bạn có thể muốn bỏ qua tính năng tối ưu hoá có tổn hao để truyền đạt chi tiết phức tạp với độ trung thực đầy đủ. Trong các trường hợp khác, bạn có thể áp dụng chế độ tối ưu hoá linh hoạt có tổn hao để giảm kích thước tệp của thành phần hình ảnh. Đây là lúc bạn cần thể hiện khả năng phán đoán và bối cảnh của mình – không có một chế độ cài đặt chung nào.

Ví dụ thực tế: khi sử dụng định dạng có tổn hao như JPEG, bộ nén thường hiển thị chế độ cài đặt "chất lượng" có thể tuỳ chỉnh (ví dụ: thanh trượt chất lượng do chức năng "Lưu cho web" trong Adobe Photoshop cung cấp), thường có số từ 1 đến 100, kiểm soát hoạt động bên trong của tập hợp thuật toán tổn hao và không tổn hao cụ thể. Để có kết quả tốt nhất, hãy thử nghiệm với nhiều chế độ cài đặt chất lượng cho hình ảnh và đừng ngại giảm số lượng chất lượng — kết quả hình ảnh thường rất tốt và kích thước tệp tiết kiệm được có thể khá lớn.

Ảnh hưởng của việc nén hình ảnh đối với Core Web Vitals

Vì hình ảnh thường là ứng cử viên cho Nội dung lớn nhất hiển thị, nên việc giảm thời lượng tải tài nguyên của hình ảnh có thể chuyển thành LCP tốt hơn trong cả phòng thí nghiệm và trong trường.

Khi áp dụng chế độ cài đặt nén cho các định dạng hình ảnh đường quét, hãy nhớ thử nghiệm với các định dạng WebP và AVIF để xem liệu bạn có thể phân phối cùng một hình ảnh với kích thước nhỏ so với các định dạng cũ hay không.

Tuy nhiên, bạn nên cẩn thận để không nén quá hình ảnh đường quét. Một giải pháp hay là sử dụng CDN tối ưu hoá hình ảnh để tìm chế độ cài đặt nén phù hợp nhất cho bạn. Tuy nhiên, một giải pháp thay thế có thể là sử dụng các công cụ như Butteraugli để ước tính sự khác biệt về hình ảnh để bạn không mã hoá hình ảnh quá quá nhiều và làm giảm chất lượng.

Danh sách kiểm tra việc tối ưu hoá hình ảnh

Một số mẹo và kỹ thuật cần ghi nhớ khi bạn tối ưu hoá hình ảnh:

• Ưu tiên định dạng vectơ: hình ảnh vectơ độc lập với độ phân giải và tỷ lệ, giúp hình ảnh phù hợp hoàn hảo với thế giới đa thiết bị và độ phân giải cao.
• Thu gọn và nén thành phần SVG: Mã đánh dấu XML do hầu hết các ứng dụng vẽ tạo ra thường chứa siêu dữ liệu không cần thiết có thể xoá; hãy đảm bảo máy chủ của bạn được định cấu hình để áp dụng tính năng nén GZIP cho thành phần SVG.
• Ưu tiên định dạng WebP hoặc AVIF hơn các định dạng đường quét cũ: WebP và Hình ảnh AVIF thường sẽ nhỏ hơn nhiều so với các định dạng hình ảnh cũ.
• Chọn định dạng hình ảnh đường quét tốt nhất:xác định các yêu cầu về chức năng của bạn rồi chọn định dạng phù hợp với từng thành phần cụ thể.
• Thử nghiệm với các chế độ cài đặt chất lượng tối ưu cho các định dạng đường quét: đừng ngại quay số các chế độ cài đặt "chất lượng", kết quả thường rất tốt và tiết kiệm byte đáng kể.
• Xoá siêu dữ liệu hình ảnh không cần thiết: nhiều hình ảnh đường quét chứa siêu dữ liệu không cần thiết về tài sản: thông tin địa lý, thông tin máy ảnh, v.v. Sử dụng công cụ thích hợp để tách dữ liệu này.
• Phân phát hình ảnh được điều chỉnh theo tỷ lệ: đổi kích thước hình ảnh và đảm bảo rằng kích thước "hiển thị" gần nhất có thể với kích thước "tự nhiên" của hình ảnh. Hãy đặc biệt chú ý đến các hình ảnh lớn, vì chúng chiếm mức hao tổn lớn nhất khi thay đổi kích thước!
• Tự động hoá, tự động hoá, tự động hoá: đầu tư vào các công cụ và cơ sở hạ tầng tự động sẽ đảm bảo rằng tất cả thành phần hình ảnh của bạn luôn được tối ưu hoá.