Dùng định dạng ảnh thế hệ mới cho Web

Cảnh báo của Lighthouse có nghĩa là chuyển đổi các tệp JPEG và PNG của bạn sang WebP hoặc AVIF, sau đó phục vụ chúng thông qua thẻ picture với hình ảnh gốc làm phương án dự phòng. Kiểm tra này là một trong những phần dễ vượt qua nhất, vì việc khắc phục mang tính kỹ thuật hơn là cấu trúc.

Lighthouse đưa ra cảnh báo khi phát hiện các hình ảnh mà nó tin rằng sẽ có dung lượng nhỏ hơn đáng kể ở định dạng hiện đại. Ước tính này dựa trên tệp mà nó đã tải xuống, vì vậy mức tiết kiệm được báo cáo thường khả thi và đôi khi còn khá khiêm tốn.

Những gì Lighthouse đang đo lường

Lighthouse tự động mã hóa lại từng hình ảnh thành WebP trong nội bộ và báo cáo sự khác biệt khi mức tiết kiệm vượt quá một ngưỡng nhất định. Con số trong báo cáo là một ước tính thực tế chứ không phải là một đề xuất chung chung.

Các hình ảnh dưới ngưỡng sẽ bị bỏ qua, đó là lý do tại sao một trang có 30 hình ảnh có thể chỉ hiển thị 4 hình ảnh trong phần kiểm tra. Các tệp được liệt kê là những tệp đáng để khắc phục trước tiên. Giải quyết chúng thường sẽ loại bỏ hoàn toàn cảnh báo, ngay cả khi các hình ảnh khác trên trang vẫn ở định dạng cũ.

Mã markup đáp ứng yêu cầu kiểm tra

Sử dụng thẻ picture với AVIF trước, WebP thứ hai và JPEG gốc trong thẻ img. Trình duyệt sẽ chọn nguồn đầu tiên mà nó hiểu, vì vậy các trình duyệt mới hơn sẽ nhận được tệp nhỏ và các trình duyệt cũ hơn vẫn nhận được hình ảnh.

Thẻ img bắt buộc phải giữ lại, vì nó chứa văn bản thay thế alt, kích thước và phương án dự phòng. Việc bỏ qua các thuộc tính width và height sẽ gây ra hiện tượng thay đổi bố cục (layout shift) khi hình ảnh tải, điều này làm hỏng một chỉ số Core Web Vitals khác trong khi đang khắc phục chỉ số này. Hãy đặt cả hai thuộc tính thành kích thước pixel thực tế của hình ảnh dự phòng.

Cách vượt qua bài kiểm tra

Để giải quyết cảnh báo một cách triệt để, hãy làm theo 6 bước sau.

1. Mở báo cáo Lighthouse và liệt kê các hình ảnh được nêu tên, đó là những hình ảnh có mức tiết kiệm có thể đo lường được.
2. Kiểm tra kích thước hiển thị của từng hình ảnh, vì nhiều hình ảnh vừa quá kích thước vừa sai định dạng.
3. Thay đổi kích thước từng hình ảnh về chiều rộng hiển thị thực tế của nó, nhân đôi cho màn hình có mật độ điểm ảnh cao.
4. Chuyển đổi sang WebP ở chất lượng 80, và sang AVIF ở chất lượng 65 cho các hình ảnh lớn nhất trên trang.
5. Phục vụ kết quả thông qua thẻ picture với hình ảnh gốc làm dự phòng trong thẻ img.
6. Chạy lại Lighthouse để xác nhận cảnh báo đã được xóa và không có hiện tượng thay đổi bố cục nào xuất hiện.

Bước 3 quan trọng hơn bước 4. Kích thước quyết định phần lớn dung lượng tệp, và một tệp WebP quá khổ vẫn là một hình ảnh quá khổ. Chuyển đổi hàng loạt chỉ mất vài phút, trong khi việc viết mã markup thường mất nhiều thời gian hơn.

Định dạng nào cho hình ảnh nào

Nền tảng của bạn đã tự động làm điều này chưa

Nhiều hệ thống quản trị nội dung và nhà cung cấp dịch vụ lưu trữ tự động chuyển đổi hình ảnh, vì vậy hãy kiểm tra trước khi tự làm thủ công. Việc làm lại một công việc đã được tự động hóa là rất phổ biến và lãng phí.

Kiểm tra trong 2 phút. Mở trang đã xuất bản, nhấp chuột phải vào hình ảnh và mở hình ảnh đó trong tab mới, sau đó đọc phần mở rộng tệp trong thanh địa chỉ. Phần mở rộng .webp trên tệp bạn đã tải lên dưới dạng JPEG có nghĩa là nền tảng đã tự động chuyển đổi. Shopify, hầu hết các nhà cung cấp dịch vụ lưu trữ WordPress được quản lý và một số trình xây dựng trang web đều thực hiện việc này theo mặc định.

Tại sao cảnh báo đôi khi xuất hiện trở lại

Các lượt tải lên mới sẽ tái diễn sự cố khi bước chuyển đổi được thực hiện thủ công thay vì tự động. Một trang web đã được dọn dẹp sạch cảnh báo vào tháng Một sẽ hiển thị lại cảnh báo vào tháng Sáu nếu người biên tập tải ảnh trực tiếp từ máy ảnh lên.

Hãy khắc phục quy trình thay vì chỉ sửa các tệp. Hoặc là kích hoạt tính năng tự động chuyển đổi ở cấp độ nền tảng, hoặc thống nhất một quy tắc đơn giản là hình ảnh phải được thay đổi kích thước và chuyển đổi trước khi tải lên. Việc viết rõ quy tắc này là rất quan trọng đối với bất kỳ trang web nào có nhiều hơn một người đăng bài, vì bài kiểm tra đo lường hình ảnh tệ nhất chứ không phải hình ảnh trung bình.

Nên sử dụng AVIF, WebP, hay cả hai

Chỉ sử dụng WebP trên hầu hết các trang web và chỉ thêm AVIF cho các hình ảnh lớn nhất trên trang. Việc hỗ trợ cả hai sẽ làm tăng gấp đôi số lượng tệp cần tạo, lưu trữ và đồng bộ hóa, trong khi mức tiết kiệm đối với các hình ảnh thông thường là rất nhỏ.

Cách tính toán này sẽ thay đổi đối với các trang web có nhiều ảnh chụp, nơi AVIF giúp tiết kiệm thêm 20 đến 30 phần trăm trên các tệp vốn đã được đo bằng hàng trăm kilobyte. Trên một trang có hình ảnh hero 600 KB, đó là một sự cắt giảm thực sự. Trên một trang gồm các hình ảnh thu nhỏ 40 KB, quy trình bổ sung này tốn nhiều công sức hơn là hiệu quả mang lại, và chỉ riêng WebP là đủ để vượt qua bài kiểm tra.

Kiểm tra kết quả một cách chính xác

Chạy lại Lighthouse trong cửa sổ ẩn danh đã tắt các tiện ích mở rộng, vì các tiện ích mở rộng của trình duyệt sẽ làm sai lệch kết quả đo lường. Điểm số cũng thay đổi giữa các lần chạy, vì vậy hãy so sánh kết quả của 3 lần chạy thay vì tin vào một con số duy nhất.

Xác minh xem trình duyệt có thực sự nhận được định dạng mới hay không thay vì tự giả định. Mở công cụ dành cho nhà phát triển (developer tools), chuyển sang tab Network, lọc theo hình ảnh và tải lại trang. Cột Type sẽ hiển thị những gì thực sự được phục vụ. Một trang vẫn phục vụ JPEG sau khi chuyển đổi thường có nghĩa là mã markup của thẻ picture bị sai, hoặc một lớp bộ nhớ đệm (caching) đang giữ phiên bản trước đó.

Các kiểm tra liên quan thường xuất hiện cùng nhau

• Kích thước hình ảnh phù hợp. Hình ảnh lớn hơn không gian hiển thị của nó. Hãy thay đổi kích thước thay vì chỉ nén.
• Mã hóa hình ảnh hiệu quả. Mức độ nén quá nhẹ. Hãy giảm cài đặt chất lượng xuống.
• Trì hoãn hình ảnh ngoài màn hình. Thêm tính năng tải chậm (lazy loading) cho các hình ảnh nằm dưới màn hình đầu tiên.
• Phần tử hiển thị nội dung lớn nhất (Largest Contentful Paint). Thường là hình ảnh hero của bạn, hình ảnh này xứng đáng được ưu tiên xử lý trước.
• Các phần tử hình ảnh không có chiều rộng và chiều cao rõ ràng. Thêm cả hai thuộc tính để ngăn chặn hiện tượng thay đổi bố cục.

5 kiểm tra đó thường xuất hiện cùng nhau, và việc thay đổi kích thước kết hợp chuyển đổi các hình ảnh được nêu tên trong báo cáo sẽ giải quyết hầu hết chúng chỉ trong một lần thực hiện.

Điều này thực sự cải thiện trang web ở mức nào

Chuyển đổi sang các định dạng hiện đại thường giúp giảm 25 đến 35 phần trăm dung lượng hình ảnh, và việc thay đổi kích thước trước đó thường còn giảm được nhiều hơn thế. Trên một trang có nhiều hình ảnh, hiệu quả kết hợp thường đạt từ 70 đến 80 phần trăm.

Sự cải thiện này thể hiện rõ ở chỉ số Largest Contentful Paint, đo lường tốc độ xuất hiện của nội dung chính. Phép đo đó thường được quyết định bởi một hình ảnh duy nhất, vì vậy việc giảm dung lượng tệp hero có tác động vượt trội so với tỷ lệ của nó trên trang. Việc giảm dung lượng của 20 hình ảnh nhỏ ít quan trọng hơn việc giảm dung lượng của 1 hình ảnh lớn.

Những điều không nên làm

Không xóa phương án dự phòng JPEG, và không chuyển đổi các hình ảnh mà khách truy cập sẽ tải xuống. Cả hai sai lầm này đều đánh đổi một tính năng thực tế để lấy một điểm số cải thiện nhỏ.

Bộ tài liệu báo chí, hướng dẫn có thể in, biểu mẫu có thể tải xuống và các tệp của nhà cung cấp nên được giữ ở định dạng JPEG hoặc PNG, vì WebP xử lý kém bên ngoài trình duyệt. Việc phục vụ những tệp đó dưới dạng định dạng hiện đại sẽ tạo ra các yêu cầu hỗ trợ từ những người không thể mở được chúng, điều này tốn kém hơn nhiều so với lượng băng thông tiết kiệm được.

Chuyển đổi các hình ảnh được nêu tên trong báo cáo

Chuyển đổi từ các tệp gốc thay vì từ các phiên bản đã được xuất bản, vì một tệp JPEG đã nén sẽ mang những hư hại của nó vào tệp mới. Bộ mã hóa không thể phân biệt các lỗi nén hiện có với chi tiết thực tế và sẽ tốn dung lượng để bảo toàn chúng.

Thả tối đa 500 tệp cùng một lúc hoặc kéo trực tiếp một tệp lưu trữ ZIP vào, và toàn bộ tệp sẽ được chuyển đổi trong một lượt. Mọi thứ đều chạy bên trong trình duyệt trên bộ vi xử lý của riêng bạn, vì vậy các trang web của khách hàng, tài nguyên thử nghiệm và các trang chưa xuất bản không bao giờ truyền đến máy chủ. Quá trình chuyển đổi toàn bộ trang web sẽ hoàn tất trong vài phút mà không có một tệp nào phải đi qua mạng.

Giữ các tệp đã chuyển đổi cùng với các tệp gốc bằng cách sử dụng tên khớp nhau, để mã markup của thẻ picture có thể được tạo theo một mẫu có thể dự đoán được thay vì phải chỉnh sửa thủ công cho từng hình ảnh. Một thư mục chứa hero.jpg, hero.webp và hero.avif rất dễ dàng để tạo mẫu, và nó giúp cho việc chuyển đổi định dạng tiếp theo trở thành một đợt chuyển đổi hàng loạt thay vì phải viết lại từng trang.