Ảnh trong suốt mà không nặng như PNG
Trong nhiều năm, PNG là lựa chọn an toàn duy nhất cho mọi ảnh web có vùng trong suốt: ảnh sản phẩm đã tách nền, logo đặt trên header màu, hình minh họa có bóng đổ mềm. JPG hoàn toàn không lưu được vùng trong suốt, nên giới thiết kế đành chấp nhận dung lượng lớn của PNG như một cái giá phải trả. Một ảnh sản phẩm tách nền 1500×1500 px ở dạng PNG thường nặng từ 1,5 đến 3 MB.
WebP xóa bỏ sự đánh đổi đó. Nó hỗ trợ kênh alpha 8 bit đầy đủ ở cả chế độ không mất dữ liệu lẫn chế độ mất dữ liệu, nên phần ảnh chụp có thể được nén như JPG trong khi vùng trong suốt vẫn mượt. Cùng ảnh sản phẩm tách nền đó thường chỉ còn 150 đến 400 KB, và vì mọi trình duyệt hiện nay đều hiển thị WebP, nó có thể thay thế trực tiếp PNG trên hầu hết các website.
Ảnh PNG nào được lợi nhiều nhất
Mức tiết kiệm phụ thuộc vào nội dung bên trong PNG, không chỉ vào dung lượng tệp.
- Nội dung dạng ảnh chụp có vùng trong suốt được lợi nhiều nhất: ảnh sản phẩm tách nền, chân dung đã xóa phông, hình minh họa có chất liệu. Tiết kiệm 70 đến 90 phần trăm là chuyện thường.
- Ảnh chụp màn hình và mockup giao diện có dải chuyển màu, ảnh chụp hoặc bóng đổ thường giảm một nửa hoặc hơn.
- Biểu tượng phẳng và logo đơn giản với vài màu đặc thì lợi ít. PNG vốn đã nén những ảnh này rất tốt, và một vài biểu tượng nhỏ thậm chí có thể nặng hơn một chút. Với chúng, giữ PNG hoặc chạy qua Nén ảnh PNG thường là lựa chọn tốt hơn.
- Ảnh PNG đã được tối ưu bằng cách giảm bảng màu tiết kiệm ít hơn so với ảnh mới xuất từ công cụ thiết kế.
Danh sách tệp hiển thị dung lượng gốc và dung lượng mới của từng ảnh, nên rất dễ nhận ra những ảnh không đáng chuyển đổi.
Quá trình chuyển đổi diễn ra thế nào
Trình duyệt giải mã từng ảnh PNG, vẽ lên canvas ở kích thước điểm ảnh gốc và mã hóa bằng bộ mã hóa WebP tích hợp sẵn, trong một worker chạy nền nếu trình duyệt hỗ trợ. Ảnh không bao giờ rời khỏi thiết bị của bạn.
Thanh trượt Chất lượng, từ 10% đến 100% với mặc định 90%, điều khiển mức nén mất dữ liệu của phần dữ liệu màu. Mặt nạ trong suốt được nén riêng với màu sắc và, với các bộ mã hóa thông thường của trình duyệt, không bị thanh trượt làm giảm chất lượng theo cùng cách, nên viền ảnh tách nền vẫn sạch ngay cả ở 75%.
Một chi tiết kỹ thuật quan trọng với một số quy trình: canvas làm việc với alpha nhân trước (premultiplied alpha), nên giá trị màu của các điểm ảnh hoàn toàn trong suốt bị loại bỏ. Điều này không nhìn thấy được trong trình duyệt hay tài liệu. Nó chỉ quan trọng nếu bạn dùng PNG làm texture trong game hoặc mặt nạ dựa vào dữ liệu màu ẩn dưới vùng trong suốt; hãy giữ những ảnh đó ở dạng PNG.
Mức chất lượng cho đồ họa
Mặc định 90% được đặt cao hơn so với ảnh chụp vì nội dung PNG điển hình, như thành phần giao diện, chữ và đường viền sắc, lộ lỗi nén sớm hơn ảnh chụp.
- 90% cho logo, ảnh chụp màn hình giao diện và hình minh họa có chữ. Gần như luôn giống hệt bản gốc khi nhìn bằng mắt.
- 80% cho ảnh chụp tách nền và ảnh hero khi dung lượng quan trọng. Khác biệt chỉ lộ ra khi phóng to.
- 95–100% cho pixel art, biểu đồ có nét mảnh và ảnh chụp màn hình chữ nhỏ. Chế độ mất dữ liệu của WebP lưu màu ở nửa độ phân giải, có thể làm nhòe những đường màu rộng một điểm ảnh; ở đầu trên của khoảng này, hiệu ứng đó là rất nhỏ.
Nếu định chỉnh sửa ảnh sau này, hãy giữ lại bản PNG gốc. WebP dành cho bản cuối cùng được xuất bản, và chuyển ngược một tệp WebP mất dữ liệu bằng Chuyển WebP sang PNG chỉ cho ra tệp lớn mà không khôi phục được chi tiết đã mất.
Dùng kết quả trên website
Thay tệp ảnh và cập nhật phần mở rộng trong đường dẫn tham chiếu; với các trình duyệt hiện nay không cần đổi gì khác trong mã HTML. Vài lưu ý thực tế:
- Đưa ảnh về đúng kích thước hiển thị trước khi chuyển đổi. Một logo hiển thị rộng 240 px chẳng được gì khi có kích thước 2400 px.
- Định dạng WebP có giới hạn cứng 16383 px mỗi cạnh, nên ảnh chụp màn hình rất dài hoặc sprite sheet vượt quá mức đó cần được chia nhỏ.
- Nhận tệp đến 50 MB mỗi tệp, cả loạt được chuyển đổi với một mức chất lượng và có thể tải về dưới dạng ZIP.
- Các đoạn văn bản và siêu dữ liệu khác bên trong PNG không được sao chép sang WebP.