Hình ảnh thường chiếm hầu hết 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ể. Kết quả là, việc tối ưu hoá hình ảnh thường có thể mang lại một số cải thiệ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 máy khách càng cạnh tranh nhiều thì trình duyệt càng có thể tải xuống và hiển thị nội dung hữu ích trên màn hình nhanh hơn.
Việc tối ưu hoá hình ảnh vừa là một nghệ thuật vừa là khoa học: một nghệ thuật vì không có câu trả lời chắc chắn nào về cách nén một hình ảnh riêng lẻ một cách hiệu quả nhất 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 một hình ảnh. Việc tìm chế độ cài đặt tối ưu cho hình ảnh của bạn đòi hỏi bạn phải phân tích cẩn thận theo nhiều phương diện: khả năng định dạng, nội dung của 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), một định dạng hình ảnh dựa trên XML cho đồ hoạ hai chiều. Bạn có thể nhúng mã đánh dấu SVG trực tiếp vào trang hoặc dưới dạng một tài nguyên bên ngoài. Hầu hết các 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 này bằng tay trực tiếp trong trình chỉnh sửa văn bản yêu thích của mình.
<?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 hiển thị hình tròn đơn giản dưới đây với đường viền màu đen và nền đỏ, đồng thời được xuất từ Adobe Illustrator.
<?xml version="1.0" encryption="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 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 các tệp SVG bằng cách chạy thông qua một công cụ như SVGO.
Trường hợp tương tự, SVGO giảm kích thước của tệp SVG ở trên do Illustrator tạo ra 58%, lấy từ 470 xuống 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 nén GZIP để giảm kích thước truyền. Hãy đảm bảo máy chủ của bạn được định cấu hình để nén các phần tử 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 10.000 pixel. Lần lượt, mỗi pixel lưu trữ các giá trị "RGBA": (R) kênh màu đỏ, (G) kênh màu xanh lục, (B) kênh màu 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ị (shades) cho mỗi kênh, dịch thành 8 bit cho 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
| Kích thước | Điểm ảnh | Kích thước tệp |
|---|---|---|
| 100 x 100 | 10.000 | 39 KB |
| 200 x 200 | 40.000 | 156 KB |
| 300 x 300 | 90.000 | 351 KB |
| 500 x 500 | 250.000 | 977 KB |
| 800 x 800 | 640.000 | 2.500 KB |
39 KB đối với hình ảnh 100x100 pixel có vẻ không quá 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 và khiến việc tải xuống các thành phần hình ảnh vừa chậm vừa tốn kém. 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 cách để 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 một bảng màu nhỏ hơn: 8 bit mỗi kênh cung cấp 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 trên mỗi pixel — đó là tiết kiệm nén 50% so với 4 byte ban đầu trên mỗi định dạng pixel!
Các cảnh phức tạp có sự chuyển đổi màu dần dần (ví dụ: độ dốc hoặc bầu trời) cần có 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 bị phân thành điểm ảnh 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 sắc, thì một bảng màu lớn chỉ đơn giản là lãng phí các phần tử quý giá!
Tiếp theo, sau khi tối ưu hoá dữ liệu lưu trữ trong từng pixel riêng lẻ, bạn cũng có thể xem xét các pixel lân cận một cách khôn ngoan hơn: biến, nhiều hình ảnh và đặc biệt là ảnh có nhiều pixel lân cận có màu sắc tương tự nhau, ví dụ: bầu trời, hoạ tiết lặp lại, v.v. Nhờ sử dụng thông tin này, 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 từng pixel, bạn có thể lưu trữ sự chênh lệch giữa các pixel lân cận: nếu các pixel liền kề giống nhau, thì delta sẽ là "0" và bạn chỉ cần lưu trữ một bit! 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 vấn đề 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 một lưới hai chiều. Tức là mỗi pixel có nhiều lân cận: bạn có thể sử dụng dữ kiện này để cải thiện hơn nữa việc mã hoá delta. Thay vì chỉ xem xét các khối pixel lân cận lớn hơn, bạn có thể xem xét các khối pixel lân cận lớn hơn và mã hoá các khối khác nhau theo các chế độ cài đặt khác nhau.
Như bạn đã biết, việc tối ưu hoá hình ảnh trở nên phức tạp một cách nhanh chóng (hoặc thú vị, tuỳ thuộc vào quan điểm của bạn) và là một lĩnh vực tích cực của nghiên cứu học thuật và thương mại. 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 hình ả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 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? Điều quan trọng là phải hiểu rõ 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 cực kỳ quan trọng mà bạn cần hiểu và lưu ý trước khi đi sâu vào 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à bộ nén không làm thay đổi hoặc 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 sai có thể thay đổi hoàn toàn ý nghĩa của nội dung tệp, hoặc tệ hơn là làm hỏng hoàn toàn. Đố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, bạn có thể cung cấp cách trình bày "gần đúng" cho dữ liệu gốc.
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ề mỗi 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, nghĩa là chúng ta có thể sử dụng ít bit hơn để mã hoá một số màu sắc. Do đó, một quy trình tối ưu hoá hình ảnh điển hình sẽ bao gồm hai bước cấp cao:
- Hình ảnh được xử lý bằng bộ lọc mất bóng để loại bỏ một số dữ liệu pixel.
- Hình ảnh được xử lý bằng bộ lọc không tổn hao có chức năng 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 điều quan trọng là bạn phải 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, chẳng hạn như GIF, PNG, JPEG và các định dạng khác, nằm ở 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 có tổn hao và không tổn hao.
Vậy cấu hình "tối ưu" của tính năng 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ác cấu phần phần mềm do tính năng nén có tổn hao gây ra: Trong một số trường hợp, bạn có thể muốn bỏ qua quá trình tối ưu hoá có tổn hao để truyền tải chi tiết phức tạp với độ trung thực hoàn toàn. Trong các trường hợp khác, bạn có thể áp dụng tính năng 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 phát huy tác dụng và bối cảnh của riêng 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 sẽ 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). Đây thường là một số từ 1 đến 100 kiểm soát hoạt động bên trong của tập hợp các thuật toán có 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 chất lượng. Kết quả trực quan thường rất tốt và mức giảm kích thước tệp có thể khá lớn.
Ảnh hưởng của việc nén hình ảnh đến Các chỉ số quan trọng về trang web
Vì hình ảnh thường là ứng viên cho Thời gian hiển thị nội dung lớn nhất, nên việc giảm thời gian tải tài nguyên của một hình ảnh có thể chuyển thành LCP tốt hơn ở cả phòng thí nghiệm và thực tế tại hiện trường.
Khi chọn chế độ nén cho đị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á nhiều hình ảnh đường quét. Một giải pháp hiệu quả là sử dụng CDN để tối ưu hoá hình ảnh để tìm chế độ nén phù hợp nhất cho bạn. Tuy nhiên, bạn có thể sử dụng các công cụ như Butteraugli để ước tính sự khác biệt về hình ảnh sao cho hình ảnh không mã hoá quá nhiều và làm giảm chất lượng quá nhiều.
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 các định dạng vectơ: hình ảnh vectơ độc lập với độ phân giải và tỷ lệ, khiến các hình ảnh này phù hợp hoàn hảo với thế giới đa thiết bị và có độ phân giải cao.
- Rút 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 và có thể xoá; đảm bảo máy chủ của bạn được định cấu hình để áp dụng nén GZIP cho các thành phần SVG.
- Ưu tiên WebP hoặc AVIF hơn các định dạng đường quét cũ: WebP và 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 và chọn định dạng phù hợp với từng thành phần cụ thể.
- Thử nghiệm với 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ố 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ề nội dung: thông tin địa lý, thông tin máy ảnh, v.v. Hãy 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 đổ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.