WebP mang lại gì cho một trang web
WebP được Google phát hành năm 2010 như một định dạng thay thế JPG, PNG và GIF, được thiết kế ưu tiên cho web. Chế độ nén mất dữ liệu của nó dựa trên kỹ thuật mã hóa trong khung hình của codec video VP8: nó dự đoán mỗi khối điểm ảnh từ các khối lân cận và chỉ lưu phần chênh lệch, hiệu quả hơn các khối 8×8 cố định của JPG. Ở cùng chất lượng hình ảnh, một bức ảnh thường nhỏ hơn từ một phần tư đến một phần ba.
Trên một ảnh đơn lẻ, mức tiết kiệm đó trông khiêm tốn. Trên cả một trang thì cộng dồn lại: một trang danh sách sản phẩm với 40 ảnh mỗi ảnh 200 KB giảm được khoảng 2 đến 3 MB sau khi chuyển đổi. Ảnh nhỏ hơn hiển thị nhanh hơn, giúp cải thiện Largest Contentful Paint, chỉ số tải trang mà các công cụ tìm kiếm sử dụng, và giảm lượng dữ liệu di động cho khách truy cập.
Mọi trình duyệt hiện nay đều hiển thị WebP, và phần lớn hệ thống quản lý nội dung nhận tải lên WebP, kể cả WordPress từ phiên bản 5.8 và các nền tảng bán hàng lớn. Với một trang web xây dựng trong vài năm gần đây, hiếm khi có lý do để tiếp tục phục vụ JPG thuần.
Khi nào nên giữ JPG
WebP là định dạng phân phối, không phải định dạng lưu trữ. Hãy giữ bản gốc ở dạng JPG (hoặc tốt hơn, tệp gốc từ máy ảnh) và chuyển đổi các bản sao để xuất bản. Hãy giữ JPG khi:
- Tệp sẽ được đem in, gửi đến phòng in ảnh hoặc khách hàng sẽ mở bằng phần mềm máy tính đời cũ.
- Đó là tệp đính kèm email gửi cho những người mà bạn không biết họ dùng ứng dụng thư nào.
- Bạn sẽ chỉnh sửa ảnh lại sau này. Mỗi lần lưu mất dữ liệu đều tốn một ít chi tiết, và các công cụ chỉnh sửa xử lý JPG nhất quán hơn.
Nếu ai đó gửi lại một tệp WebP mà không mở được, chuyển WebP sang JPG sẽ đảo ngược quá trình.
Công cụ xử lý tệp của bạn thế nào
Ảnh được trình duyệt giải mã, vẽ lên canvas ở kích thước gốc và mã hóa thành WebP bằng bộ mã hóa tích hợp của trình duyệt, trong một worker chạy nền khi có thể. Tệp ở lại trên thiết bị của bạn.
Công cụ nhận cả JPG lẫn PNG. Đầu vào PNG hữu ích cho ảnh chụp màn hình và đồ họa có độ trong suốt: kênh alpha được giữ, nên một ảnh sản phẩm đã tách nền vẫn nằm gọn gàng trên mọi nền. JPG không có độ trong suốt, nên đầu vào JPG cho ra WebP đục.
Kích thước điểm ảnh không đổi. Bản thân định dạng WebP bị giới hạn ở 16383 px mỗi cạnh, nên ảnh toàn cảnh rất lớn cần được thu nhỏ trước khi chuyển đổi. Siêu dữ liệu như thông tin máy ảnh EXIF và vị trí GPS không được sao chép vào đầu ra, thường đúng là điều bạn muốn với ảnh đăng online.
Thiết lập chất lượng hiệu quả
Thanh trượt Chất lượng chạy từ 10% đến 100% và bắt đầu ở 85%. Thang chất lượng của WebP không giống của JPG, nên đừng chỉ chép lại con số bạn đã dùng cho JPG. Một vài điểm tham chiếu:
- 80–85% cho ảnh trên trang nội dung. Đây là khoảng mà WebP cho phần lớn mức tiết kiệm mà không có thay đổi nhìn thấy được ở kích thước xem bình thường.
- 70–75% cho ảnh thu nhỏ, lưới danh sách và ảnh nền, nơi ảnh nhỏ hoặc bị chữ che một phần.
- 90–95% cho ảnh hero trên màn hình lớn và ảnh chụp màn hình có chữ nhỏ. WebP mất dữ liệu lưu màu ở nửa độ phân giải, nên các đường màu mảnh và chữ đỏ trên nền tối có thể trông hơi mềm ở mức thấp hơn.
Tránh 100% cho ảnh chụp. Mức này tạo ra tệp thường lớn hơn cả tệp JPG ban đầu mà không có lợi ích nhìn thấy được, vì chính các lỗi nén của JPG đang được bảo toàn chi tiết.
Tận dụng tối đa việc chuyển đổi
Một tệp JPG đã bị nén mạnh sẽ không nhỏ đi nhiều nữa. Chuyển đổi một tệp JPG 60 KB lưu ở chất lượng 60 có thể chỉ giảm vài phần trăm, và vòng nén mất dữ liệu thứ hai có thể khiến hiện tượng vỡ khối lộ rõ hơn. Mức giảm lớn nhất đến từ bản gốc chất lượng cao.
Thứ tự các bước quan trọng hơn giá trị chất lượng chính xác:
- Bắt đầu từ phiên bản lớn nhất, chất lượng tốt nhất mà bạn có.
- Thay đổi kích thước về đúng kích thước trang thực sự hiển thị, ví dụ rộng 1600 px cho ảnh toàn chiều rộng hoặc 600 px cho một thẻ.
- Chuyển sang WebP ở 80–85% và so sánh dung lượng trước và sau hiển thị cho từng tệp.
Công cụ hỗ trợ xử lý theo loạt, giới hạn 50 MB mỗi tệp. Mọi tệp trong một loạt dùng cùng chất lượng, nên nếu bạn trộn ảnh chụp và ảnh chụp màn hình, hãy chuyển đổi thành hai lượt với thiết lập phù hợp cho từng loại.