RudihartoWebsite terasa lambat padahal desain sudah menarik dan konten sudah optimal? Salah satu penyebabnya bisa jadi ukuran gambar yang terlalu besar. Format WebP hadir sebagai solusi karena mampu menghasilkan ukuran file yang lebih kecil tanpa menurunkan kualitas visual. Dengan menerapkan upload gambar WebP di WordPress, Anda bisa meningkatkan performa website sekaligus memperbaiki user experience.
Dalam panduan ini, kami akan membahas secara lengkap tentang apa itu format WebP, cara kerja, hingga convert gambar menjadi WebP secara mudah di WordPress.
Apa Itu Format Gambar WebP?
WebP adalah format gambar modern yang dikembangkan oleh Google untuk menghasilkan ukuran file yang lebih kecil tanpa mengurangi kualitas secara signifikan. Format ini dirancang sebagai solusi untuk kebutuhan web yang menuntut kecepatan loading tinggi namun tetap mempertahankan tampilan visual yang baik.
Berdasarkan informasi resmi dari Google, gambar WebP dalam mode lossless memiliki ukuran rata-rata sekitar 26% lebih kecil dibandingkan PNG. Sementara dalam mode lossy, ukuran file WebP bisa 25–34% lebih kecil dibandingkan JPEG dengan tingkat kualitas visual yang sebanding.
Meskipun pada awal kemunculannya belum didukung oleh semua browser, saat ini WebP sudah kompatibel dengan sebagian besar browser modern seperti Google Chrome, Safari, Mozilla Firefox, Microsoft Edge, dan Opera. Selain itu, banyak tools desain serta library pengolahan gambar yang kini juga mendukung format ini.
Selengkapnya tentang format WebP kami publikasi di artikel berikut: Apa Itu WebP?
Kenapa Format WebP Ukurannya Lebih Kecil?
Format WebP memiliki ukuran lebih kecil karena menggunakan teknik kompresi yang lebih efisien dibandingkan JPEG dan PNG. Pada mode lossy, WebP memanfaatkan metode kompresi prediktif yang menganalisis blok piksel di sekitar gambar untuk mengurangi data yang tidak diperlukan tanpa menurunkan kualitas secara signifikan.
Sementara pada mode lossless, WebP menggunakan teknik kompresi berbasis algoritma modern yang mampu menghilangkan redundansi data dengan lebih optimal dibandingkan PNG. Berikut penjelasan masing-masing metodenya:
Lossy Compression
Pada metode lossy compression, WebP menggunakan teknologi yang mengadaptasi codec video VP8 dengan teknik yang disebut predictive coding. Cara kerjanya adalah sistem menganalisis blok piksel di sekitar suatu area gambar untuk memprediksi nilai piksel berikutnya. Alih-alih menyimpan seluruh data gambar, sistem hanya menyimpan perbedaan (selisih) antara hasil prediksi dan data asli.
Pendekatan ini membuat ukuran file menjadi jauh lebih kecil karena data yang disimpan lebih sedikit, namun kualitas visual tetap dijaga agar perbedaannya tidak terlalu terlihat oleh mata manusia.
Lossless Compression
Berbeda dengan lossy, metode lossless compression tidak menghilangkan data gambar sehingga kualitasnya tetap utuh. Pada mode ini, WebP menggunakan teknik kompresi yang menyusun ulang fragmen data gambar secara lebih efisien tanpa membuang informasi apa pun.
Hasilnya, ukuran file tetap lebih kecil dibandingkan PNG, tetapi kualitas gambar tidak mengalami penurunan.
Struktur File WebP
Secara teknis, file WebP terdiri dari dua komponen utama. Data inti gambar menggunakan format VP8 untuk kompresi lossy atau VP8L untuk kompresi lossless. Sementara itu, file WebP dibungkus dalam container dengan standar RIFF (Resource Interchange File Format), yang berfungsi sebagai struktur pembungkus data.
Bagi developer yang ingin mempelajari lebih dalam, Google menyediakan library resmi bernama libwebp, lengkap dengan dokumentasi dan source code yang dapat diakses melalui repositori GitHub atau dalam bentuk file tarball resmi.
Kapan Waktunya Menggunakan WebP?
Waktu terbaik untuk menggunakan format gambar WebP adalah sejak awal proses pembangunan website. Dengan ukuran file yang lebih ringan dan kualitas visual yang tetap terjaga, WebP dapat membantu meningkatkan kecepatan loading halaman, terutama pada website yang memiliki banyak elemen gambar seperti blog, company profile, maupun toko online.
Kabar baiknya, sejak WordPress versi 5.8, format WebP sudah didukung secara default. Artinya, Anda bisa langsung mengunggah dan menggunakan gambar WebP tanpa perlu tambahan plugin khusus.
Namun, jika website WordPress Anda sudah terlanjur menggunakan banyak gambar dalam format JPG, JPEG, atau PNG, Anda tetap bisa mengoptimalkannya. Saat ini tersedia berbagai plugin optimasi gambar yang dapat secara otomatis mengonversi gambar lama ke format WebP tanpa perlu mengunggah ulang satu per satu. Dengan cara ini, Anda tetap bisa meningkatkan performa website tanpa harus membangun ulang konten dari awal.
Cara Convert Gambar menjadi WebP
Pada artikel ini, kami akan membagikan dua metode untuk mengonversi gambar dari format JPG/JPEG/PNG menjadi WebP, yaitu dengan cara mengunggah gambar langsung dalam format WebP serta mengonversi gambar yang sebelumnya sudah diunggah ke website.
Opsi 1. Secara Online
Untuk website yang baru dibangun atau gambar baru yang akan diunggah ke website, kita bisa melakukan konversi gambar menggunakan situs-situs free seperti:
Dalam panduan ini, kami akan berbagi cara convert file gambar menjadi webp menggunakan cloudconvert. Berikut langkah-langkahnya.
- Akses situsnya sesuai Url diatas > Select File dari komputer.
- Setelah itu, klik Convert tunggu hingga proses selesai dan gambar dapat di unduh dengan format WebP ke komputer Anda.
Setelah melakukan convert, Anda bisa mengunggah gambar tersebut di website WordPress yang Anda miliki.
Opsi 2. Melalui Plugins
Untuk mengonversi gambar-gambar yang sudah ada di website ke format WebP di WordPress, Anda dapat menggunakan plugin optimasi gambar yang tersedia di library, salah satunya adalah Imagify. Plugin ini memungkinkan Anda mengubah gambar lama secara otomatis ke format WebP tanpa perlu mengunggah ulang satu per satu.
Selain Imagify, tersedia juga berbagai plugin lain dengan fungsi serupa, seperti EWWW Image Optimizer, SG Optimizer, dan beberapa plugin optimasi gambar lainnya yang mendukung konversi WebP secara otomatis.
Berikut cara convert file gambar menjadi format webp di WordPress dengan plugin Imagify.
- Install plugin Imagify di WordPress anda terlebih dahulu. Ikuti tutorial berikut ini Cara Install Plugin WordPress
- Pilih menu Setting > Imagify di sisi kiri panel > Create Api Key > isi alamat email Anda untuk dikirimi code Api Key.
- Silakan konfirmasi dilink untuk seting password akun Imagify. Untuk API Key bisa dicopy dibagian bawahnya.
- Isi Api Key di email dikolom > save changes.
- Setelah itu konfigurasi Imagify > Save & Go to Bulk Optimizer.
Pada opsi Display images in Next Gen format, Imagify menyediakan dua metode untuk menampilkan gambar dalam format WebP, yaitu:
- Use rewrite rules
Metode ini menggunakan aturan pada file.htaccessuntuk menyajikan gambar WebP secara otomatis. Keunggulannya adalah prosesnya lebih cepat karena langsung ditangani oleh server. Namun, metode ini terkadang tidak berjalan optimal jika website Anda menggunakan CDN.
- Use <picture> tags
Metode ini menggunakan tag HTML<picture>untuk menampilkan gambar WebP. Cara ini lebih kompatibel dengan penggunaan CDN. Akan tetapi, pada beberapa kasus, metode ini bisa kurang kompatibel dengan tema WordPress tertentu.
Silakan pilih metode yang paling sesuai dengan konfigurasi website Anda.
- Pada bagian ini silakan klik Imagif’em All.
Secara otomatis, plugin Imagify akan memproses semua gambar disitus Anda di background. Apabila gambar-gambar disitus Anda banyak, prossenya akan memerlukan waktu beberapa puluh menit. Dari pengujian yang kami lakukan dengan dua gambar pada website, Imagify membutuhkan waktu sekitar 5-10 menit.
Setelah proses optimasi format webp di WordPress telah selesai, Anda bisa memeriksa extention gambarnya dengan membuka salah satu postingan atau halaman, kemudian open new tab pada garmbarnya. Nantinya extention gambar akan berubah menjadi WebP seperti screenshot berikut ini.
Penutup
WebP adalah teknologi modern yang dirancang untuk meningkatkan kecepatan website melalui kompresi gambar yang lebih efisien. Dengan ukuran file yang rata-rata 26–34% lebih kecil dibandingkan JPG atau PNG, WebP mampu menjaga kualitas visual tetap optimal tanpa membebani proses loading halaman.
Seain itu, penggunaan format ini membantu website tampil lebih cepat, meningkatkan skor performa, serta memberikan pengalaman pengguna yang lebih baik. Agar hasil optimasi semakin maksimal, pastikan website Anda didukung oleh layanan hosting yang andal dan cepat. Layanan Hosting dari Rumahweb telah dilengkapi dengan fitur Web Accelerator yang membantu mempercepat akses website secara optimal.
Dengan kombinasi format WebP di WordPress dan infrastruktur hosting yang optimal, performa website Anda bisa lebih stabil, responsif, dan siap bersaing di hasil pencarian. Jadi, apakah skor website Anda sudah naik sekarang?
