Cara menggunakan
- Seret file WebP ke area seret-lepas, klik untuk memilih file, atau tempel gambar. File PNG dan JPEG juga bisa.
- Untuk membuat WebP dari format lain, pilih WebP di Konversi ke dan atur Kualitas.
- Jika perlu, atur Lebar maks., lalu bandingkan ukuran asli dengan ukuran hasil enkode.
- Salin atau unduh data URI, Base64 mentah, tag img HTML, CSS background-image, atau Markdown.
Apa itu WebP?
WebP adalah format gambar yang dirilis Google pada 2010. Format ini menyediakan kompresi lossy berbasis codec video VP8, mode lossless tersendiri, kanal alfa, dan animasi, semuanya dalam satu format. Tipe MIME-nya image/webp, dan karena filenya berupa kontainer RIFF, keluaran Base64-nya diawali dengan UklGR. Menurut Google, file WebP lossless sekitar 26% lebih kecil daripada PNG, dan file lossy 25 hingga 34% lebih kecil daripada JPEG pada kualitas yang sebanding.
Mengapa WebP cocok untuk data URI
Base64 menambahkan sepertiga ukuran yang sama pada setiap file, jadi file sumber terkecil menghasilkan string terpendek. Inilah yang membuat WebP sangat cocok: ikon PNG transparan yang dikonversi ke WebP tetap transparan dan biasanya menyusut, sedangkan foto JPEG menjadi lebih kecil dengan kualitas visual yang serupa. Pengaturan kualitas yang sangat tinggi dapat menghasilkan file yang lebih besar daripada file asli yang sudah dioptimalkan, jadi periksa ukuran hasil enkode sebelum menyalin.
File WebP beranimasi mempertahankan semua frame-nya jika dienkode tanpa perubahan. Konversi atau pengubahan ukuran hanya merender ulang satu frame.
Dukungan browser dan klien
Semua browser utama saat ini menampilkan WebP: Chrome, Edge, Firefox, Opera, dan Safari 14 atau yang lebih baru. Hanya browser yang sangat lama seperti Internet Explorer yang tidak mendukungnya. Lain halnya dengan email: beberapa klien email desktop, termasuk Outlook untuk Windows, tidak merender WebP, jadi gunakan PNG atau JPEG di template email.
Membuat data URI WebP dengan JavaScript
// Membaca file yang dipilih pengguna
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Mengenkode ulang canvas sebagai WebP dengan kualitas 80%
const uri = canvas.toDataURL('image/webp', 0.8);Jika browser tidak dapat mengenkode WebP, toDataURL diam-diam beralih ke PNG, jadi pastikan hasilnya diawali dengan data:image/webp.
Pertanyaan yang sering diajukan
Bisakah saya mengonversi PNG atau JPEG ke Base64 WebP di sini?
Bisa. Muat gambar, pilih WebP di Konversi ke, dan atur Kualitas. Konversi memakai encoder bawaan browser Anda, dan hasilnya dienkode sebagai data:image/webp.
Apakah Base64 mempertahankan animasi WebP?
Ya, selama tidak ada konversi yang dipilih dan Lebar maks. tidak diatur. String Base64 kemudian berisi file yang persis sama beserta semua frame-nya.
Apakah semua browser menampilkan gambar data:image/webp?
Semua versi terbaru Chrome, Edge, Firefox, Opera, dan Safari menampilkannya. Internet Explorer dan Safari sebelum versi 14 tidak.