Câu hỏi đầu tiên bạn nên tự hỏi là liệu một hình ảnh có thực sự cần thiết để đạt được hiệu ứng mà bạn muốn hay không. Nếu bạn có thể loại bỏ một tài nguyên hình ảnh, thường đòi hỏi một lượng lớn byte so với HTML, CSS, JavaScript và các thành phần khác trên trang, thì đó luôn là chiến lược tối ưu hoá tốt nhất. Tuy nhiên, một hình ảnh được đặt đúng chỗ cũng có thể truyền đạt nhiều thông tin hơn một ngàn từ, vì vậy, bạn cần phải tìm ra sự cân bằng đó.
Tiếp theo, bạn nên cân nhắc xem có công nghệ thay thế nào có thể mang lại kết quả tốt hơn nhưng hiệu quả hơn hay không:
- Bạn có thể sử dụng hiệu ứng CSS (chẳng hạn như bóng đổ hoặc chuyển màu) và ảnh động CSS để tạo các thành phần độc lập với độ phân giải, luôn trông sắc nét ở mọi độ phân giải và mức thu phóng, thường chỉ chiếm một phần nhỏ byte mà tệp hình ảnh cần.
- Phông chữ web cho phép sử dụng các kiểu chữ đẹp mắt trong khi vẫn giữ được khả năng chọn, tìm kiếm và điều chỉnh kích thước văn bản – một điểm cải tiến đáng kể về khả năng hữu dụng.
Nếu bạn từng mã hoá văn bản trong một thành phần hình ảnh, hãy dừng lại và cân nhắc lại. Kiểu chữ đẹp là yếu tố quan trọng để thiết kế, xây dựng thương hiệu và dễ đọc, nhưng văn bản trong hình ảnh lại mang lại trải nghiệm người dùng kém: văn bản không thể chọn, không thể tìm kiếm, không thể thu phóng, không hỗ trợ tiếp cận và không thân thiện với các thiết bị có độ phân giải cao. Việc sử dụng phông chữ web đòi hỏi một bộ tối ưu hoá riêng, nhưng phông chữ web giải quyết được tất cả những vấn đề này và luôn là lựa chọn tốt hơn để hiển thị văn bản.
Chọn định dạng hình ảnh phù hợp
Nếu chắc chắn rằng hình ảnh là lựa chọn phù hợp, bạn nên chọn loại hình ảnh phù hợp với công việc một cách cẩn thận.
- Đồ hoạ vectơ sử dụng các đường, điểm và đa giác để biểu thị hình ảnh.
- Đồ hoạ đường quét đại diện cho một hình ảnh bằng cách mã hoá các giá trị riêng lẻ của từng pixel trong một lưới hình chữ nhật.
Mỗi định dạng đều có những ưu điểm và nhược điểm riêng. Định dạng vectơ phù hợp nhất với những hình ảnh bao gồm các hình dạng hình học ít phức tạp hơn, chẳng hạn như biểu trưng, văn bản hoặc biểu tượng. Định dạng này mang lại kết quả sắc nét ở mọi độ phân giải và chế độ thu phóng, nhờ đó trở thành định dạng lý tưởng cho màn hình có độ phân giải cao và các thành phần cần hiển thị ở nhiều kích thước.
Tuy nhiên, các định dạng vectơ sẽ không phù hợp khi cảnh phức tạp (ví dụ: ảnh): lượng mã đánh dấu SVG để mô tả tất cả các hình dạng có thể quá cao và kết quả vẫn có thể không "thực tế như ảnh". Khi đó, bạn nên sử dụng định dạng hình ảnh đường quét như PNG, JPEG, WebP hoặc AVIF.
Hình ảnh đường quét không có các thuộc tính tốt như độ phân giải hoặc thu phóng độc lập – khi bạn tăng tỷ lệ hình ảnh đường quét, bạn sẽ thấy đồ hoạ bị răng cưa và mờ. Do đó, bạn có thể cần lưu nhiều phiên bản hình ảnh đường quét ở nhiều độ phân giải để mang lại trải nghiệm tối ưu cho người dùng.
Ảnh hưởng của màn hình có độ phân giải cao
Có hai loại pixel: pixel CSS và pixel thiết bị. Một pixel CSS có thể tương ứng trực tiếp với một pixel thiết bị hoặc có thể được hỗ trợ bởi nhiều pixel thiết bị. Mục đích là gì? Số pixel trên thiết bị càng nhiều thì nội dung hiển thị trên màn hình càng chi tiết.
Màn hình có độ phân giải cao (HiDPI) mang lại kết quả đẹp mắt, nhưng có một sự đánh đổi rõ ràng: thành phần hình ảnh cần nhiều chi tiết hơn để tận dụng số pixel cao hơn trên thiết bị. Tin vui là hình ảnh vectơ rất phù hợp với nhiệm vụ này, vì hình ảnh vectơ có thể được kết xuất ở bất kỳ độ phân giải nào với kết quả sắc nét. Bạn có thể phải chịu chi phí xử lý cao hơn để kết xuất chi tiết tốt hơn, nhưng tài sản cơ bản vẫn giống nhau và không phụ thuộc vào độ phân giải.
Mặt khác, hình ảnh đường quét gây ra thách thức lớn hơn nhiều vì chúng mã hoá dữ liệu hình ảnh trên cơ sở mỗi pixel. Do đó, số lượng pixel càng lớn thì kích thước tệp của hình ảnh đường quét càng lớn. Hãy xem xét sự khác biệt giữa một thành phần ảnh hiển thị ở kích thước 100x100 pixel (CSS):
| Độ phân giải màn hình | Tổng số pixel | Kích thước tệp chưa nén (4 byte trên mỗi pixel) |
|---|---|---|
| 1x | 100 x 100 = 10.000 | 40.000 byte |
| 2x | 100 x 100 x 4 = 40.000 | 160.000 byte |
| 3x | 100 x 100 x 9 = 90.000 | 360.000 byte |
Khi chúng ta tăng gấp đôi độ phân giải của màn hình thực, tổng số pixel sẽ tăng gấp bốn lần: gấp đôi số pixel theo chiều ngang, nhân với gấp đôi số pixel theo chiều dọc. Do đó, màn hình "2x" không chỉ tăng gấp đôi mà còn tăng gấp bốn số lượng pixel cần thiết!
Vậy điều này có ý nghĩa gì trong thực tế? Màn hình có độ phân giải cao giúp bạn cung cấp hình ảnh đẹp mắt, đây có thể là một tính năng tuyệt vời của sản phẩm. Tuy nhiên, màn hình có độ phân giải cao cũng yêu cầu hình ảnh có độ phân giải cao, do đó:
- Hãy ưu tiên hình ảnh vectơ bất cứ khi nào có thể vì các hình ảnh này không phụ thuộc vào độ phân giải và luôn mang lại kết quả sắc nét.
- Nếu cần hình ảnh đường quét, hãy phân phát hình ảnh thích ứng.
Các tính năng của nhiều định dạng hình ảnh đường quét
Ngoài các thuật toán nén có tổn hao và không tổn hao, các định dạng hình ảnh khác nhau còn hỗ trợ các tính năng khác nhau như kênh ảnh động và kênh độ trong suốt (alpha). Do đó, việc lựa chọn "định dạng phù hợp" cho một hình ảnh cụ thể là sự kết hợp giữa kết quả hình ảnh phù hợp và các yêu cầu về chức năng.
| Định dạng | Sự minh bạch | Hoạt ảnh | Trình duyệt |
|---|---|---|---|
| PNG | Có | Có (APNG) | Tất cả |
| JPEG | Không | Không | Tất cả |
| WebP | Có | Có | Tất cả trình duyệt hiện đại. Xem phần Tôi có thể sử dụng không? |
| AVIF | Có | Có | Tất cả trình duyệt hiện đại. Xem phần Tôi có thể sử dụng không? |
Có hai định dạng hình ảnh đường quét được hỗ trợ phổ biến: PNG và JPEG. Ngoài các định dạng này, các trình duyệt hiện đại còn hỗ trợ các định dạng hình ảnh WebP và AVIF mới hơn. Cả hai định dạng mới đều có khả năng nén tổng thể tốt hơn và nhiều tính năng hơn. Vậy bạn nên sử dụng định dạng nào?
WebP và AVIF thường nén tốt hơn so với các định dạng cũ và nên được sử dụng khi có thể. Bạn có thể sử dụng hình ảnh WebP hoặc AVIF cùng với hình ảnh JPEG hoặc PNG làm hình ảnh dự phòng. Hãy xem phần Sử dụng hình ảnh WebP để biết thêm thông tin chi tiết.
Đối với các định dạng hình ảnh cũ, hãy cân nhắc những điều sau:
- Bạn có cần ảnh động không? Sử dụng phần tử
<video>.- Còn ảnh GIF thì sao? GIF giới hạn bảng màu ở mức tối đa 256 màu và tạo kích thước tệp lớn hơn đáng kể so với các phần tử
<video>. APNG cung cấp nhiều màu hơn GIF, nhưng cũng lớn hơn đáng kể so với các định dạng video có chất lượng hình ảnh tương đương hợp lý. Xem phần Thay thế ảnh GIF động bằng video.
- Còn ảnh GIF thì sao? GIF giới hạn bảng màu ở mức tối đa 256 màu và tạo kích thước tệp lớn hơn đáng kể so với các phần tử
- Bạn có cần giữ lại các chi tiết nhỏ với độ phân giải cao nhất không? Sử dụng PNG hoặc WebP không suy hao.
- PNG không áp dụng bất kỳ thuật toán nén nào có tổn hao ngoài lựa chọn kích thước của bảng màu. Do đó, định dạng này sẽ tạo ra hình ảnh có chất lượng cao nhất, nhưng kích thước tệp lớn hơn đáng kể so với các định dạng khác. Hãy sử dụng một cách thận trọng.
- WebP có chế độ mã hoá không hao tổn có thể hiệu quả hơn so với PNG.
- Nếu thành phần hình ảnh chứa hình ảnh được tạo thành từ các hình dạng hình học, hãy cân nhắc chuyển đổi thành phần đó sang định dạng vectơ (SVG)!
- Nếu thành phần hình ảnh chứa văn bản, hãy dừng lại và xem xét lại. Không thể chọn, tìm kiếm hoặc "thu phóng" văn bản trong hình ảnh. Nếu bạn cần truyền tải giao diện tuỳ chỉnh (cho mục đích xây dựng thương hiệu hoặc vì lý do khác), hãy sử dụng phông chữ web.
- Bạn đang tối ưu hoá ảnh, ảnh chụp màn hình hoặc thành phần hình ảnh tương tự? Sử dụng JPEG, WebP có tổn hao hoặc AVIF.
- JPEG sử dụng kết hợp tính năng tối ưu hoá có tổn hao và không tổn hao để giảm kích thước tệp của thành phần hình ảnh. Hãy thử một số cấp độ chất lượng JPEG để tìm ra sự đánh đổi tốt nhất giữa chất lượng và kích thước tệp cho thành phần của bạn.
- WebP có tổn hao hoặc AVIF có tổn hao là những lựa chọn thay thế tuyệt vời cho JPEG đối với hình ảnh chất lượng web, nhưng hãy lưu ý rằng chế độ có tổn hao sẽ loại bỏ một số thông tin để có được hình ảnh nhỏ hơn. Điều này có nghĩa là một số màu có thể không giống với JPEG tương đương.
Cuối cùng, xin lưu ý rằng nếu đang sử dụng WebView để hiển thị nội dung trong ứng dụng dành riêng cho nền tảng, thì bạn có toàn quyền kiểm soát ứng dụng và có thể sử dụng riêng WebP! Facebook và nhiều ứng dụng khác sử dụng WebP để phân phối tất cả hình ảnh trong ứng dụng của họ. Việc tiết kiệm này chắc chắn đáng giá.
Mức tác động đến Thời gian hiển thị nội dung lớn nhất (LCP)
Hình ảnh có thể là ứng viên LCP. Điều đó có nghĩa là kích thước của hình ảnh ảnh hưởng đến thời gian tải của hình ảnh đó. Khi một hình ảnh là đề xuất LCP, việc mã hoá hình ảnh đó một cách hiệu quả là rất quan trọng để cải thiện LCP.
Bạn nên cố gắng áp dụng các lời khuyên trong hướng dẫn này để hiệu suất cảm nhận của trang nhanh nhất có thể cho tất cả người dùng. LCP là một phần của hiệu suất cảm nhận, vì chỉ số này đo lường tốc độ hiển thị của phần tử lớn nhất (và do đó là phần tử dễ nhận biết nhất) trên trang.