Apa itu WebP? Definisi dan Cara Menggunakannya di Website

WebP adalah format gambar modern yang digadang-gadang oleh Google, bahkan Google sendiri menyarankan semua orang menggunakan format WebP di website mereka. Hal ini adalah hal yang wajar, karena pada dasarnya WebP adalah format gambar yang dikembangkan oleh Google.

Apa Anda pernah download gambar dari internet, namun gambar tersebut tidak bisa dibuka di galeri bawaan smartphone, atau bahkan di Windows sendiri? Gambar tersebut mungkin memiliki format WebP, yang hanya bisa dibuka di browser.

Artikel ini akan membahas apa itu WebP, bagaimana cara kerjanya, kelebihan dan kekurangannya, hingga bagaimana cara menggunakan format WebP di website dan WordPress Anda.

Apa Itu WebP?

WebP adalah format gambar yang bertujuan menyajikan file gambar dengan kualitas tinggi dan ringan, format ini dikembangkan oleh Google pada tahun 2010. Pengembangan teknologi ini didasarkan pada teknologi On2 Technologies yang sebelumnya sudah diakuisisi oleh Google.

Google menyebut WebP sebagai format gambar modern yang mendukung kompresi lossless dan lossy, yang dapat menjadi solusi untuk penyimpanan yang lebih efisien dan loading gambar lebih cepat di halaman web.

Kedua kompresi tersebut pada intinya akan mengompresi ukuran file gambar tanpa menghilangkan detail atau kualitas dari gambar tersebut secara signifikan. Mata manusia tidak akan melihat perbedaan pada kualitas dari gambar yang sudah dikompresi.

Google sendiri mengklaim ukuran kompresi gambar WebP lossless 26% lebih kecil dibandingkan format gambar PNG. Sedangkan gambar yang dikompresi dengan lossy, ukuran gambarnya bisa 25-35% lebih kecil dibandingkan format gambar JPEG.

Dengan menggunakan format WebP, pemilik website tidak hanya membantu mempercepat waktu loading halaman website mereka, tapi juga mengurangi penggunaan bandwith, dan menghemat penyimpanan mereka tanpa kehilangan kualitas gambar.

Cara Kerja WebP

Format ini menggunakan teknik kompresi canggih, baik kompresi lossy (kehilangan sedikit detail) maupun lossless (tanpa kehilangan detail), sehingga dapat menghasilkan gambar yang lebih efisien dibandingkan format gambar tradisional seperti JPEG dan PNG.

Pada kompresi lossy, WebP memanfaatkan algoritma yang mirip dengan yang digunakan dalam video codec VP8. Algoritma ini bekerja dengan menghilangkan detail-detail kecil yang sulit dilihat oleh mata manusia, sambil menjaga kualitas gambar tetap baik.

Sedangkan pada kompresi lossless, WebP menggunakan teknik seperti prediksi piksel dan penyandian entropi, yang memungkinkan format ini menyimpan gambar dengan ukuran lebih kecil tetapi tetap mempertahankan semua detail aslinya.

Kedua kompresi ini akan menghasilkan gambar dengan ukuran file yang lebih kecil, namun tetap menjaga kualitas detail gambar aslinya.

Kenapa Harus Menggunakan WebP?

Dari segi SEO sendiri, optimasi gambar adalah salah satu faktor utama dalam meningkatkan performa website. Menurut Pingdom, sekitar 60% dari total ukuran halaman web berasal dari gambar, apalagi jika gambar tersebut berukuran besar dan resolusi tinggi.

Dengan menggunakan format WebP, Anda akan mengurangi ukuran halaman web dengan signifikan, sehingga berdampak besar pada waktu loading halaman dan pengalaman pengguna. Berikut adalah beberapa alasan utama kenapa website Anda perlu menggunakan WebP:

• Meningkatkan Kecepatan Website: WebP pada umumnya memiliki ukuran yang lebih kecil dibandingkan JPEG dan PNG, sehingga gambar dapat dimuat dengan lebih cepat. Loading halaman web yang lebih cepat umumnya akan menurunkan bounce rate dan meningkatkan user engagement yang merupakan faktor penting dalam konteks SEO.
• Meningkatkan Performa SEO: Pengalaman pengguna dan kecepatan website adalah bagian dari faktor ranking yang Google pertimbangkan dalam menilai sebuah website. Dengan menggunakan WebP, Anda dapat meningkatkan kedua aspek tersebut secara langsung, yang nantinya berpotensi meningkatkan peringkat lebih tinggi di hasil pencarian SERP.
• Menghemat Bandwith dan Ruang Penyimpanan: Dengan ukuran file yang lebih kecil, server hosting Anda dapat menampung lebih banyak file dan juga mengurangi biaya penyimpanan jika Anda menggunakan layanan penyimpanan gambar berbayar. Pengguna yang mengakses halaman situs web Anda juga dapat menghemat data yang mereka gunakan karena ukuran halaman cenderung lebih kecil.

Kelebihan WebP

Berikut adalah beberapa kelebihan utama yang membuat format WebP ini menjadi pilihan unggul dibandingkan format gambar lainnya:

• Ukuran File Kecil: Kompresi WebP menghasilkan ukuran file 25-34% lebih kecil dibandingkan format JPEG, PNG, atau GIF. Ukuran kecil ini akan membantu mempercepat waktu memuat halaman situs web dan menghemat bandwidth.
• Kualitas Gambar Tinggi: Dengan algoritma kompresi yang efisien, WebP dapat mempertahankan kualitas gambar yang tinggi meskipun ukuran file dikurangi secara signifikan. Anda dapat memilih kompresi lossy atau lossless sesuai keinginan Anda, keduanya memberikan kompresi dengan detail gambar yang tetap terjaga.
• Dukungan Transparansi: WebP mendukung transparansi (alpha channel) seperti PNG untuk logo dan gambar dengan background transparan lainnya. Namun, WebP memiliki ukuran file lebih kecil dibanding PNG, sehingga format ini lebih ideal untuk elemen grafis di web.
• Dukungan Animasi: WebP mendukung animasi dengan ukuran file lebih kecil dibanding GIF, yang membuat format ini lebih efisien untuk penggunaan animasi.
• Kompatibilitas Browser yang Luas: WebP didukung oleh sebagian besar browser modern seperti Google Chrome, Microsoft Edge, Firefox, dan browser-browser terbarukan lainnya.

Kekurangan WebP

Meskipun memiliki banyak kelebihan, WebP juga memiliki beberapa kelemahan yang perlu dipertimbangkan:

• Dukungan Terbatas pada Perangkat Lama: WebP tidak didukung oleh beberapa browser versi lama seperti Internet Explorer. WebP juga tidak dapat dilihat melalui aplikasi galeri bawaan smartphone dan Windows kebanyakan. Oleh karena itu, Anda perlu menyediakan fallback untuk format lain seperti JPEG atau PNG, terutama jika gambar Anda sering didownload oleh pengunjung website.
• Proses Konversi yang Memakan Waktu: Mengonversi gambar ke format WebP memerlukan software atau plugin khusus. Hal ini dapat menjadi kendala bagi pengguna yang tidak terbiasa dengan teknologi tambahan.
• Dukungan Terbatas pada Software Editor: Masih banyak aplikasi edit gambar yang belum mendukung gambar dengan WebP. Anda mungkin memerlukan plugin tambahan untuk membuka atau menyimpan file WebP.

Cara Menggunakan WebP di Website

Berikut adalah beberapa metode untuk menggunakan format ini di situs web Anda:

Konversi Gambar ke WebP

Langkah utama yang perlu Anda lakukan adalah melakukan konversi pada gambar PNG, JPEG menjadi format WebP. Terdapat berbagai banyak tools yang dapat Anda manfaatkan:

• Tools Online: Squoosh yang dikembangkan oleh tim GoogleChromeLabs di Github. Anda juga dapat menggunakan tools konversi gambar lain seperti CloudConvert, dan alternatif lainnya.
• Software: Photoshop (dengan plugin WebP), GIMP, atau aplikasi seperti XnConvert.

Implementasi Gambar di Website

Implementasi menggunakan elemen <picture> untuk menyediakan fallback jika browser pengguna tidak mendukung WebP.

<picture>
<source srcset="depici.com/images/gambar.webp" type="image/webp">
<img src="depici.com/images/gambar-fallback.jpg" alt="Deskripsi Gambar" loading="lazy">
</picture>

Elemen <source> digunakan untuk memuat gambar WebP, sedangkan elemen <img> digunakan sebagai fallback jika WebP tidak didukung oleh browser pengguna. Alt adalah alt teks atau deskripsi dari gambar tersebut, dan elemen loading digunakan untuk mengaktifkan lazy loading.

Alternatif lain yang bisa Anda gunakan adalah dengan menggunakan CDN seperti Cloudflare, Fastly, dan penyedia layanan lainnya yang mendukung konversi gambar WebP secara otomatis. Namun, perhatikan bahwa kebanyakan CDN ini berbayar, dan pastikan implementasi CDN berjalan dengan baik.

Cara Menggunakan WebP di WordPress

Implementasi penggunaan format WebP di WordPress cukup mudah, apalagi jika Anda menggunakan bantuan plugin. Berikut adalah tahap yang dapat Anda lakukan untuk menggunakan WebP di WordPress:

Gunakan Plugin

Plugin adalah cara paling praktis untuk mengonversi gambar ke WebP dan mengoptimalkannya di WordPress. Berikut adalah beberapa plugin yang populer:

• Imagify: Plugin ini dapat secara otomatis mengonversi gambar ke WebP dan menyediakan fallback untuk format lain jika browser pengunjung tidak mendukung WebP.
• ShortPixel: Plugin ini mendukung kompresi gambar dan konversi ke WebP dengan kualitas tinggi.
• EWWW Image Optimizer: Plugin ini memungkinkan konversi gambar ke WebP langsung dari dashboard WordPress.

Anda dapat mengupload file dengan format PNG, JPEG, dan plugin di atas akan langsung mengonversi gambar Anda ke WebP dan menyediakan fallbacknya secara otomatis.

Upload Manual

WordPress saat ini sudah mendukung format WebP pada versi WordPress 5.8 dan versi setelahnya. Anda dapat langsung mengupload gambar dengan format WebP ke media library WordPress.

1. Pada dashboard WordPress situs Anda, masuk ke Media -> Add New.
2. Pilih dan unggah gambar file .webp Anda seperti biasa, dan Anda akan melihat file WebP terunggah tanpa masalah.

Meskipun Anda dapat mengupload file WebP secara manual, Anda perlu memastikan Anda terdapat fallback untuk format lain agar pengguna dengan versi browser lama tetap dapat melihat gambat. Anda dapat menggunakan kode tambahan di file .htaccess atau menggunakan bantuan plugin Imagify, atau semacamnya.

Kesimpulan

WebP adalah format gambar modern yang dirancang untuk meningkatkan performa website dengan melakukan kompres ukuran file yang lebih kecil tanpa mengorbankan kualitas.

WebP support untuk gambar dengan background transparan, dan dapat digunakan untuk animasi. Selain itu, semakin banyak dukungan pada perangat dan browser terbaru membuat WebP menjadi pilihan yang baik sebagai format gambar di website.

Dengan menggunakan WebP, Anda tidak hanya mempercepat waktu pemuatan halaman tetapi juga meningkatkan performa SEO dan pengalaman pengguna situs Anda.