Câu hỏi đầu tiên bạn nên tự hỏi bản thân là liệu một hình ảnh có cần thiết để đạt được hiệu quả mong muốn trong thực tế hay không. Thiết kế tốt thường đơn giản và cũng sẽ luôn mang lại hiệu suất tốt nhất. 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 số 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 tốt cũng có thể truyền tải nhiều thông tin hơn so với một nghìn từ, vì vậy bạn có thể tìm thấy 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ả mong muốn nhưng hiệu quả hơn không:
- Hiệu ứng CSS (chẳng hạn như đổ bóng hoặc chuyển màu) và ảnh động CSS có thể được dùng để tạo các thành phần không phụ thuộc vào độ phân giải. Những thành phần này luôn trông sắc nét ở mọi độ phân giải và mức thu phóng, thường là ở một phần nhỏ byte mà tệp hình ảnh yêu cầu.
- Phông chữ trên web cho phép sử dụng kiểu chữ đẹp trong khi vẫn duy trì khả năng chọn, tìm kiếm và đổi kích thước văn bản – một cải tiến đáng kể về khả năng hữu dụng.
Nếu bạn thấy mình đang mã hoá văn bản trong thành phần hình ảnh, hãy dừng lại và xem xét lại. Kiểu chữ hợp lý đóng vai trò quan trọng đối với thiết kế, thương hiệu và khả năng đọc tốt, nhưng văn bản trong hình ảnh mang lại trải nghiệm không tốt cho người dùng: văn bản không thể chọn được, không tìm kiếm được, không thể thu phóng, không truy cập được và không thân thiện với các thiết bị có DPI cao. Việc sử dụng phông chữ trên web đòi hỏi phải có bộ tối ưu hoá riêng, nhưng phông chữ này sẽ giải quyết 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 bạn chắc chắn lựa chọn hình ảnh là chính xác, bạn nên cẩn thận chọn đúng loại hình ảnh cho công việc.
- Đồ hoạ vectơ sử dụng các đường, điểm và đa giác để biểu thị hình ảnh.
- Đồ hoạ đường quét biểu thị hình ảnh bằng cách mã hoá các giá trị riêng lẻ của mỗi pixel trong lưới hình chữ nhật.
Mỗi định dạng đều có những ưu và nhược điểm riêng. Định dạng vectơ phù hợp lý tưởng với những hình ảnh có chứa các hình dạng hình học đơn giản như biểu trưng, văn bản hoặc biểu tượng. Định dạng này cung cấp kết quả sắc nét ở mọi chế độ cài đặt thu phóng và độ phân giải, khiến chúng trở thành định dạng lý tưởng cho các thành phần và màn hình có độ phân giải cao cần được hiển thị ở nhiều kích thước khác nhau.
Tuy nhiên, các định dạng vectơ có thể thiếu khi cảnh quay phức tạp (ví dụ như ảnh): số lượng mã đánh dấu SVG để mô tả tất cả các hình dạng có thể rất cao và đầu ra có thể vẫn không "trông như ảnh thực". Trong trường hợp này, 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ùng các thuộc tính đẹp mắt như độ phân giải hoặc thu phóng độc lập — khi mở rộng hình ảnh đường quét, bạn sẽ thấy hình ảnh lởm chởm và mờ. Do đó, bạn có thể cần lưu nhiều phiên bản hình ảnh đường quét ở các độ phân giải khác nhau để mang lại trải nghiệm tối ưu cho người dùng.
Hệ quả của màn hình có độ phân giải cao
Có hai loại pixel khác nhau: 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 nhiều pixel thiết bị hỗ trợ. Ý nghĩa là gì? Càng có nhiều pixel thiết bị thì chi tiết của nội dung hiển thị trên màn hình càng chi tiết.
Màn hình DPI (HiDPI) cao tạo ra kết quả đẹp, nhưng có một sự đánh đổi rõ ràng: thành phần hình ảnh yêu cầu nhiều chi tiết hơn để tận dụng số lượng pixel cao hơn trên thiết bị. Tin vui là hình ảnh vectơ là lựa chọn lý tưởng cho nhiệm vụ này, vì chúng có thể hiển thị ở 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 để hiển thị chi tiết hơn, nhưng thành phần cơ bản là giống nhau và độc lập với độ phân giải.
Mặt khác, hình ảnh đường quét gây ra một thách thức lớn hơn nhiều vì chúng mã hóa dữ liệu hình ảnh trên cơ sở mỗi pixel. Do đó, số pixel càng lớn, kích thước tệp của hình ảnh đường quét càng lớn. Ví dụ: hãy cùng xem xét sự khác biệt giữa thành phần ảnh có 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 không 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ế, tổng số pixel sẽ tăng lên hệ số 4: gấp đôi số lượng pixel ngang, gấp đôi số lượng pixel 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 lần số pixel bắt buộc!
Vậy trong thực tế, điều này có nghĩa là gì? Màn hình có độ phân giải cao giúp bạn cung cấp những 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 đó:
- Ưu tiên hình ảnh vectơ bất cứ khi nào có thể vì chúng 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 điểm của các định dạng hình ảnh đường quét khác nhau
Ngoài các thuật toán nén có tổn hao và không tổn hao khác nhau, các định dạng hình ảnh khác nhau cũng hỗ trợ các tính năng khác nhau như ảnh động và kênh trong suốt (alpha). Do đó, 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ả trực quan mong muốn 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ó | Không | Tất cả |
| JPEG | Không | Không | Tất cả |
| WebP | Có | Có | Tất cả trình duyệt hiện đại. Hãy xem phần Tôi có thể sử dụng không? |
| AVIF | Có | Có | Không. Hãy 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 hỗ trợ định dạng WebP mới hơn, trong khi chỉ một số trình duyệt hỗ trợ định dạng AVIF mới. 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 sẽ nén tốt hơn các định dạng cũ và nên được sử dụng nếu có thể. Bạn có thể dùng hình ảnh WebP hoặc AVIF cùng với hình ảnh JPEG hoặc PNG để dự phòng. Hãy xem bài viết Sử dụng hình ảnh WebP để biết thêm chi tiết.
Đối với định dạng hình ảnh cũ hơn, 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>.- Ảnh GIF thì sao? GIF giới hạn bảng màu ở tối đa 256 màu và tạo ra kích thước tệp lớn hơn đáng kể so với các phần tử
<video>. Hãy xem phần Thay thế ảnh GIF động bằng video.
- Ảnh GIF thì sao? GIF giới hạn bảng màu ở tối đa 256 màu và tạo ra 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ữ nguyên chi tiết nhỏ với độ phân giải cao nhất không? Dùng PNG hoặc WebP không tổn hao.
- PNG không áp dụng bất kỳ thuật toán nén có tổn hao nào ngoài lựa chọn kích thước của bảng màu. Kết quả là, định dạng này sẽ tạo ra hình ảnh có chất lượng cao nhất, nhưng có kích thước tệp cao hơn đáng kể so với các định dạng khác. Hãy thận trọng khi sử dụng.
- WebP có chế độ mã hoá không tổn hao có thể hiệu quả hơn PNG.
- Nếu thành phần hình ảnh chứa hình ảnh gồm các hình dạng hình học, hãy cân nhắc chuyển đổi hình ảnh đó sang định dạng vectơ (SVG)!
- Nếu thành phần hình ảnh có chứa văn bản, hãy dừng 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 (vì 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ữ dành cho web.
- Bạn có đ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ự không? Sử dụng định dạng JPEG, WebP có tổn hao hoặc AVIF có tổn hao.
- JPEG sử dụng kết hợp phương pháp 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 vài mức chất lượng JPEG để tìm ra mức chất lượng tốt nhất so với việc đánh đổi kích thước tệp cho nội dung của bạn.
- WebP suy hao hoặc AVIF có tổn hao có thể được chấp nhận dưới dạng các giải pháp thay thế JPEG, nhưng hãy lưu ý rằng chế độ suy hao của WebP cụ thể sẽ loại bỏ một số thông tin về sắc độ để đạt được hình ảnh nhỏ hơn. Tức là các màu được chọn có thể không giống với ảnh JPEG tương đương.
Cuối cùng, xin lưu ý rằng nếu đang dùng WebView để hiển thị nội dung trong ứng dụng dành riêng cho nền tảng, bạn sẽ có toàn quyền kiểm soát ứng dụng và có thể dùng riêng WebP! Facebook và nhiều bên khác sử dụng WebP để phân phối tất cả hình ảnh trong ứng dụng của họ – khoản tiết kiệm này thực sự xứng đáng.
Tác động đến thời gian hiển thị nội dung lớn nhất (LCP)
Hình ảnh có thể là đề xuất LCP. Tức là kích thước của hình ảnh sẽ ảnh hưởng đến thời gian tải. Khi hình ảnh là một LCP đề xuất, việc mã hoá hiệu quả hình ảnh đó là điều rất quan trọng để cải thiện LCP.
Bạn nên cố gắng áp dụng lời khuyên trong bài viết này để hiệu suất cảm nhận của một 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 nhận thức, vì LCP đo lường tốc độ hiển thị của phần tử lớn nhất (và dễ nhận biết nhất) trên trang.