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