Cách sử dụng
- Thả tệp WebP vào vùng thả, nhấp để chọn tệp hoặc dán ảnh. Tệp PNG và JPEG cũng dùng được.
- Để tạo WebP từ định dạng khác, hãy chọn WebP ở mục Chuyển sang và đặt Chất lượng.
- Nếu muốn, hãy đặt Chiều rộng tối đa, rồi so sánh dung lượng gốc với dung lượng sau mã hóa.
- Sao chép hoặc tải xuống data URI, Base64 thuần, thẻ img HTML, CSS background-image hoặc Markdown.
WebP là gì?
WebP là định dạng ảnh do Google phát hành năm 2010. Định dạng này cung cấp nén mất dữ liệu dựa trên codec video VP8, một chế độ không mất dữ liệu riêng, kênh alpha và ảnh động, tất cả trong cùng một định dạng. Kiểu MIME là image/webp, và vì tệp là một container RIFF nên đầu ra Base64 bắt đầu bằng UklGR. Theo Google, tệp WebP không mất dữ liệu nhỏ hơn PNG khoảng 26%, còn tệp nén mất dữ liệu nhỏ hơn JPEG từ 25 đến 34% ở chất lượng tương đương.
Vì sao WebP hợp với data URI
Base64 làm mọi tệp tăng thêm một phần ba như nhau, nên tệp nguồn càng nhỏ thì chuỗi càng ngắn. Điều đó khiến WebP trở thành lựa chọn tự nhiên: một biểu tượng PNG trong suốt khi chuyển sang WebP vẫn giữ độ trong suốt và thường nhỏ đi, còn ảnh chụp JPEG sẽ nhẹ hơn ở chất lượng hình ảnh tương tự. Thiết lập chất lượng quá cao có thể tạo ra tệp lớn hơn bản gốc đã được tối ưu, vì vậy hãy kiểm tra dung lượng sau mã hóa trước khi sao chép.
Tệp WebP động giữ đủ mọi khung hình khi bạn mã hóa nguyên vẹn. Khi chuyển đổi hoặc thay đổi kích thước, ảnh chỉ được vẽ lại với một khung hình duy nhất.
Hỗ trợ trên trình duyệt và ứng dụng
Mọi trình duyệt lớn hiện nay đều hiển thị WebP: Chrome, Edge, Firefox, Opera và Safari 14 trở lên. Chỉ những trình duyệt rất cũ như Internet Explorer là không hỗ trợ. Email thì khác: nhiều ứng dụng email trên máy tính, trong đó có Outlook cho Windows, không hiển thị WebP, vì vậy hãy dùng PNG hoặc JPEG trong mẫu email.
Tạo data URI WebP bằng JavaScript
// Đọc tệp mà người dùng đã chọn
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Mã hóa lại canvas thành WebP với chất lượng 80%
const uri = canvas.toDataURL('image/webp', 0.8);Nếu trình duyệt không mã hóa được WebP, toDataURL sẽ lặng lẽ chuyển sang PNG, vì vậy hãy kiểm tra xem kết quả có bắt đầu bằng data:image/webp hay không.
Câu hỏi thường gặp
Tôi có thể chuyển PNG hoặc JPEG sang WebP Base64 tại đây không?
Có. Hãy tải ảnh lên trang, chọn WebP ở mục Chuyển sang và đặt Chất lượng. Việc chuyển đổi dùng bộ mã hóa có sẵn trong trình duyệt của bạn, và kết quả được mã hóa dưới dạng data:image/webp.
Base64 có giữ được ảnh động WebP không?
Có, miễn là bạn không chọn chuyển đổi và không đặt Chiều rộng tối đa. Khi đó chuỗi Base64 chứa chính xác tệp gốc với đầy đủ mọi khung hình.
Mọi trình duyệt có hiển thị ảnh data:image/webp không?
Tất cả phiên bản hiện tại của Chrome, Edge, Firefox, Opera và Safari đều hiển thị được. Internet Explorer và Safari trước phiên bản 14 thì không.