Ghi chú từ đội ngũ về tay nghề, định dạng và những quyết định nhỏ đằng sau một kết quả tốt.
Cách WebP đạt dung lượng nhỏ hơn PNG
WebP dùng hai chế độ nén khác nhau. Chế độ không mất dữ liệu kết hợp dự đoán không gian và màu sắc với một giai đoạn mã hóa entropy tinh vi hơn DEFLATE của PNG, đạt tỷ lệ nén tốt hơn khoảng 26 phần trăm trên ảnh thông thường theo chuẩn đo Google công bố. Chế độ có mất dữ liệu áp dụng một phép biến đổi theo khối tương tự như nén video, được thiết kế để loại bỏ thông tin mà mắt người không cảm nhận được trong khi giữ những gì mắt thật sự thấy. Với ảnh có kênh alpha, WebP dùng một nhánh nén con không mất riêng cho dữ liệu alpha trong khi áp dụng nén có mất cho dữ liệu RGB, đó là lý do WebP có mất dữ liệu kèm độ trong suốt có thể nhỏ hơn PNG khoảng ba lần ở chất lượng thị giác tương đương. DEFLATE của PNG chỉ có không mất dữ liệu và không thể tận dụng sự đánh đổi theo cảm nhận mà chế độ có mất khai thác. Khác biệt về định dạng giải thích khoảng cách này.
Chi tiết về kênh alpha
Cả PNG và WebP đều hỗ trợ độ trong suốt alpha 8 bit, nghĩa là mỗi điểm ảnh có thể mang một giá trị độ mờ từ 0 (hoàn toàn trong suốt) đến 255 (hoàn toàn đặc). Khi bộ máy ảnh của nền tảng lưu một PNG thành WebP, nó đọc các giá trị RGBA của mọi điểm ảnh và đưa các giá trị alpha thẳng vào bước nén WebP, nơi chúng được giữ bằng nén không mất, độc lập với cách dữ liệu RGB được xử lý. Kết quả là mỗi điểm ảnh trong suốt ở alpha 0, mỗi điểm bán trong suốt giữa 1 và 254, và mỗi điểm đặc ở 255 trong PNG đều ánh xạ tới đúng cùng một trạng thái trong WebP. Với một logo có bóng đổ mềm hoặc chữ khử răng cưa trên nền trong suốt, độ mượt của cạnh được giữ nguyên. Điều này tương phản với JPG, vốn không có trường alpha trong đặc tả vùng chứa và phải ghép ảnh lên một màu nền trước khi xử lý.
Core Web Vitals và việc chọn định dạng ảnh
Largest Contentful Paint đo thời gian để phần tử hiển thị lớn nhất trên trang xuất hiện trong khung nhìn. Với hầu hết trang nội dung, phần tử đó là ảnh chính, và Google dùng LCP làm tín hiệu xếp hạng trong đánh giá Core Web Vitals. Ảnh PNG là nguồn gây lỗi LCP một cách nhất quán vì dung lượng tệp, do một PNG ảnh chụp ở độ phân giải 4K có thể nặng vài megabyte trong khi WebP tương đương ở mức gần như không mất thường chỉ là một phần nhỏ của con số đó. PageSpeed Insights gắn cờ điều này cụ thể trong mục kiểm tra phục vụ ảnh ở định dạng thế hệ mới, liệt kê PNG là định dạng cần thay thế. Chuyển các PNG nằm trên đường vẽ then chốt sang WebP là một trong những thay đổi đơn lẻ có đòn bẩy cao nhất để cải thiện hiệu năng trang đo được. Dòng thời gian hỗ trợ trình duyệt khiến việc này an toàn, với Chrome thêm WebP năm 2011, Firefox năm 2019, Safari năm 2020, và Edge từ bản dựng lại trên Chromium.
Kết quả có mất dữ liệu và mức cài đặt gần như không mất
Việc tạo WebP cung cấp một tham số chất lượng từ 0 đến 100, trong đó giá trị cao hơn giữ nhiều chi tiết hơn với cái giá là tệp lớn hơn. Công cụ này tạo ở một mức gần như không mất cố định, được tinh chỉnh để cân bằng độ trung thực thị giác với dung lượng cho các loại tài nguyên web điển hình gồm ảnh chụp, đồ họa giao diện và biểu tượng. Ở mức này, kết quả không phân biệt được về cảm nhận với PNG gốc ở khoảng cách xem màn hình thông thường. Về mặt kỹ thuật, một chút độ chính xác cấp bit bị mất so với một bản tạo không mất thật sự, nghĩa là một so sánh ở cấp byte giữa các điểm ảnh WebP đã giải mã và các điểm ảnh PNG gốc sẽ cho thấy những khác biệt số nhỏ. Những khác biệt này nằm dưới ngưỡng cảm nhận của con người với nội dung ảnh chụp. Với ảnh y khoa, ảnh vệ tinh, hay bảo tồn số lưu trữ, nơi độ trung thực không mất là yêu cầu cứng, cách đúng là giữ PNG và chỉ dùng WebP làm bản xuất phân phối, không phải bản làm việc.
Hành vi với siêu dữ liệu
Luồng dùng để chuyển PNG sang WebP loại bỏ siêu dữ liệu EXIF, IPTC và XMP khỏi kết quả. Điều này khớp với hành vi quan sát được trên cả ba bộ máy trình duyệt chính. Hồ sơ màu ICC được xử lý không nhất quán, trong đó Chrome và Safari giữ thẻ hồ sơ ICC sRGB trong kết quả WebP còn Firefox loại bỏ mọi siêu dữ liệu kể cả hồ sơ ICC. Kết quả ròng là WebP đã chuyển an toàn với sRGB trên các trình duyệt, nhưng bất kỳ thẻ gam màu rộng nào như Display-P3, Adobe RGB, hay ProPhoto RGB có trong PNG gốc sẽ không sống sót trong Firefox. Với quy trình chuyên nghiệp đòi hỏi màu chính xác, sự không nhất quán này quan trọng, nên nếu kết quả cuối cần độ trung thực hồ sơ màu, hãy chuyển bằng một công cụ ghi dữ liệu ICC một cách rõ ràng, hoặc gắn lại thẻ hồ sơ ở bước hậu kỳ bằng một trình biên tập siêu dữ liệu ảnh chuyên dụng.
Khi nào giữ PNG và khi nào WebP là đủ
Cây quyết định thực tế khá ngắn. Nếu điểm đến cuối của ảnh là một trang web hay ứng dụng web, và môi trường hiển thị là bất kỳ trình duyệt nào từ 2020 trở đi, WebP là định dạng xuất đúng. Nếu ảnh cần mở trong một ứng dụng thiết kế như Figma, Sketch, hay Affinity Designer, hãy kiểm tra hỗ trợ WebP trong phiên bản cụ thể bạn dùng, vì hỗ trợ thay đổi. Nếu ảnh sẽ được dùng trong quy trình in, PNG hoặc TIFF được ưa hơn vì hầu hết RIP in không xử lý WebP. Nếu ảnh sẽ gửi qua email, PNG an toàn hơn vì các trình email nổi tiếng thiếu nhất quán với định dạng hiện đại. Nếu ảnh sẽ dùng làm tệp làm việc được chỉnh sửa và lưu lại nhiều lần, hãy giữ PNG làm bản gốc. WebP ở chất lượng gần như không mất là một định dạng phân phối tuyệt vời, còn PNG là định dạng tốt hơn để lưu trữ và chỉnh sửa. Quy trình lý tưởng giữ PNG làm bản gốc và xuất ra WebP để phân phối web.
