Kalau Anda pernah menguji situs di Google PageSpeed Insights lalu muncul peringatan "Sajikan gambar dalam format generasi berikutnya", saran yang dimaksud adalah mengubah gambar Anda ke WebP. Inilah format yang dianggap Google sebagai standar modern untuk gambar di web — dan alasannya cukup kuat.
Apa arti nama WebP?
WebP adalah format gambar buatan Google yang dirilis pada 2010. Namanya merupakan gabungan dari Web + P (dari Picture, yang berarti gambar). Format ini dibuat dengan satu tujuan jelas: menawarkan kompresi yang lebih baik daripada JPG dan PNG agar halaman web jadi lebih ringan tanpa mengorbankan kualitas visual.
Berbeda dari JPG (yang hanya mendukung kompresi lossy) dan PNG (yang hanya mendukung kompresi lossless), WebP mendukung kedua mode kompresi — lossy dan lossless — ditambah transparansi berkanal alfa dan animasi. Dalam praktiknya, ia satu format yang menggantikan JPG, PNG, dan GIF sekaligus.
Bagaimana cara kerja WebP?
WebP lossy dibangun di atas codec video VP8, yang juga dikembangkan Google. Teknik yang dipakai disebut prediksi blok: alih-alih menyimpan tiap piksel satu per satu, algoritmenya menebak nilai setiap blok piksel berdasarkan blok-blok di sekitarnya, lalu hanya menyimpan selisih antara tebakan dan nilai sebenarnya. Makin kecil selisihnya, makin kecil pula ukuran filenya.
WebP lossless memakai serangkaian teknik tersendiri, mulai dari prediksi spasial, transformasi warna, sampai kompresi entropi dengan algoritme LZ77 + pengodean Huffman. Hasilnya adalah file lossless yang jauh lebih kecil daripada PNG setara — rata-rata 26% lebih ringan untuk isi yang sama.
Benarkah WebP lebih kecil daripada JPG dan PNG?
Benar, dan selisihnya cukup besar. Menurut data Google sendiri:
| Perbandingan | Rata-rata pengurangan ukuran |
|---|---|
| WebP lossy vs JPG (kualitas visual sama) | 25–35% lebih kecil |
| WebP lossless vs PNG (kualitas sama) | ~26% lebih kecil |
| WebP transparan vs PNG | ~22% lebih kecil |
Dalam praktiknya, itu berarti toko online dengan 500 foto produk berformat JPG bisa memangkas sepertiga total bobot gambarnya hanya dengan beralih ke WebP — tanpa penurunan kualitas yang kasatmata.
💡 Dampaknya ke SEO: Google memakai kecepatan muat sebagai faktor peringkat. Gambar WebP menurunkan LCP (Largest Contentful Paint) — salah satu metrik utama Core Web Vitals — dan berkontribusi langsung pada posisi yang lebih baik di hasil pencarian.
Apa saja kelebihan WebP?
- File lebih kecil dengan kualitas setara: baik di mode lossy maupun lossless, efisiensi kompresi WebP mengungguli JPG dan PNG.
- Dukungan transparansi: seperti PNG, WebP mendukung kanal alfa penuh dengan 256 tingkat opasitas — dan dengan ukuran file yang lebih kecil.
- Dukungan animasi: WebP animasi menggantikan GIF dengan file jauh lebih kecil dan kualitas warna lebih baik (GIF terbatas 256 warna; WebP sanggup jutaan).
- Mode lossy dan lossless dalam satu format: satu format untuk segala kebutuhan — foto, logo, ikon, dan animasi.
- Dukungan metadata: WebP mendukung metadata EXIF dan XMP, sehingga informasi kamera, lokasi, dan hak cipta tetap tersimpan.
- Dukungan bawaan di semua browser modern: Chrome, Firefox, Safari, Edge, dan Opera sudah mendukung WebP sejak 2020.
Apa saja keterbatasan WebP?
- Kompatibilitas terbatas di luar web: banyak software edit gambar lawas, aplikasi penampil, dan sistem lama yang belum mengenali format ini secara bawaan. Windows 10 dan versi sebelumnya butuh codec tambahan agar WebP bisa dibuka di File Explorer.
- Belum diterima di sebagian platform: aplikasi seperti WhatsApp dan beberapa layanan email marketing masih menolak unggahan WebP — di situasi itu, JPG atau PNG tetap dibutuhkan.
- Pilihan penyuntingan lebih sempit: hanya sedikit software profesional yang mendukung penuh penyuntingan WebP. Untuk alur kerja editing, sebaiknya simpan file asli dalam RAW, TIFF, atau PSD dan ekspor ke WebP hanya di versi finalnya.
- Tidak didukung di email: aplikasi email seperti Outlook dan Apple Mail tidak menampilkan WebP. Untuk gambar di email, pakai JPG atau PNG.
WebP vs JPG vs PNG vs SVG — perbandingan lengkap
| Karakteristik | WebP | JPG | PNG | SVG |
|---|---|---|---|---|
| Kompresi | Lossy dan lossless | Lossy | Lossless | Vektor |
| Transparansi | Ya | Tidak | Ya | Ya |
| Animasi | Ya | Tidak | Tidak* | Ya |
| Cocok untuk foto | Ya | Ya | Tidak | Tidak |
| Cocok untuk logo dan ikon | Ya | Tidak | Ya | Ya |
| Bisa diperbesar tanpa pecah | Tidak | Tidak | Tidak | Ya |
| Ukuran file | Sangat kecil | Kecil | Sedang sampai besar | Sangat kecil |
| Dukungan universal | Browser modern | Universal | Universal | Browser modern |
* PNG animasi (APNG) memang ada, tetapi dukungannya terbatas.
Kapan sebaiknya memakai WebP?
WebP jadi pilihan terbaik untuk sebagian besar gambar yang tampil di situs dan aplikasi web modern:
- Foto produk di toko online: kualitas setara JPG, tapi 25–35% lebih ringan — halaman termuat lebih cepat tanpa mengorbankan mutu.
- Gambar banner dan hero: bagian yang bobot gambarnya berdampak langsung pada LCP dan kenyamanan pengunjung.
- Logo dan ikon transparan: menggantikan PNG dengan file lebih kecil dan dukungan kanal alfa yang utuh.
- Gambar di blog dan portofolio: lebih ringan, kualitas visual sama, skor PageSpeed lebih baik.
- Pengganti GIF animasi: WebP animasi menghasilkan file jauh lebih kecil dengan kualitas warna yang jauh melampaui GIF.
Hindari WebP untuk gambar yang dikirim lewat email, unggahan ke media sosial yang belum menerima format ini, dan file kerja yang masih akan diedit — untuk itu semua, tetap gunakan JPG atau PNG.
Ubah gambar Anda ke WebP sekarang
Pangkas bobot gambar Anda sampai 35% tanpa penurunan kualitas. Konversi JPG dan PNG ke WebP secara gratis, langsung di browser.
Konversi ke WebPBagaimana memakai WebP dengan cadangan untuk browser lama?
Meski semua browser modern sudah mendukung WebP, menyediakan cadangan dalam JPG atau PNG tetap praktik yang baik demi kompatibilitas. Di HTML, hal itu dilakukan dengan tag <picture>:
Dengan cara ini, browser yang mendukung WebP akan memuat file yang lebih kecil; sisanya otomatis memuat JPG atau PNG sebagai gantinya. Inilah strategi yang disarankan Google untuk situs yang butuh kompatibilitas luas.