Cara Menggunakan Gambar WebP di WordPress

Anda mungkin bertanya-tanya bagaimana cara menggunakan gambar WebP di WordPress. Dengan beralih ke format WebP, Anda dapat mengurangi ukuran berkas gambar secara signifikan tanpa mengorbankan kualitas, yang membantu halaman dimuat lebih cepat dan meningkatkan pengalaman pengguna secara keseluruhan. Dalam panduan ini, kami akan membahas metode praktis untuk menerapkan gambar WebP secara efektif di situs WordPress Anda. 

WebP adalah format gambar modern yang dikembangkan oleh Google yang menawarkan kompresi lebih baik dibandingkan format seperti JPEG dan PNG . Selain waktu muat yang lebih cepat, penggunaan WebP juga dapat berdampak positif pada SEO, mengurangi bandwidth server, dan memastikan situs web Anda berfungsi optimal di berbagai perangkat dan peramban. Artikel ini akan memandu Anda melalui beberapa pendekatan, termasuk plugin dan pengaturan server, untuk memastikan transisi yang lancar.

Apa itu gambar WebP?

WebP adalah format gambar modern yang dikembangkan oleh Google khusus untuk web. Keunggulan utamanya adalah ukuran berkasnya yang jauh lebih kecil daripada format tradisional, seperti JPEG dan PNG, biasanya 25-35% lebih kecil, dengan tetap mempertahankan kualitas visual yang sama. Ini berarti situs web Anda dapat dimuat lebih cepat tanpa mengurangi kualitas gambar, yang sangat bermanfaat untuk situs yang banyak memuat gambar, seperti blog, portofolio, atau toko online.

WebP mendukung kompresi lossy dan lossless, serta fitur-fitur seperti transparansi dan animasi, menjadikannya alternatif serbaguna untuk berbagai format lama. Dengan mengurangi ukuran berkas gambar, WebP membantu meningkatkan kinerja situs web secara keseluruhan, mengurangi penggunaan bandwidth, dan memberikan pengalaman yang lebih lancar bagi pengunjung.

Sebagian besar peramban modern kini mendukung WebP, termasuk Chrome, Firefox, Edge, Opera, dan Safari (iOS 14 dan yang lebih baru), yang secara kolektif menjangkau sekitar 95% pengguna internet. Hanya sebagian kecil peramban lama, seperti Internet Explorer atau Safari versi lama, yang tidak mendukung WebP. Untuk kasus ini, situs web dapat menggunakan gambar JPEG atau PNG cadangan untuk memastikan semua orang tetap melihat foto dengan benar.

Cara menggunakan gambar WebP di WordPress

Menggunakan gambar WebP di WordPress adalah cara cerdas untuk meningkatkan kecepatan dan kinerja situs Anda secara keseluruhan. Dengan mengadopsi format gambar modern ini, Anda dapat menampilkan gambar yang lebih kecil dan berkualitas tinggi yang dimuat lebih cepat oleh pengunjung, sehingga meningkatkan pengalaman pengguna dan SEO .

Di bagian ini, kita akan menjelajahi beberapa metode praktis untuk menerapkan gambar WebP di situs WordPress Anda.

Menggunakan gambar WebP di WordPress dengan EWWW Optimizer

EWWW Image Optimizer adalah salah satu plugin kompresi gambar WordPress terbaik yang tidak hanya mengurangi ukuran berkas gambar tetapi juga mendukung format WebP. Plugin ini dapat secara otomatis mengirimkan gambar WebP ke peramban yang kompatibel, membantu situs web Anda memuat lebih cepat dan berkinerja lebih baik.

Langkah pertama adalah memasang dan mengaktifkan plugin EWWW Image Optimizer. Setelah diaktifkan, buka Pengaturan > EWWW Image Optimizer untuk mengonfigurasi opsinya.

Di layar pengaturan, gulir ke bawah dan aktifkan "Konversi WebP" , lalu klik "Simpan Perubahan" untuk menyimpan konfigurasi Anda.

Selanjutnya, buka bagian Konversi WebP, tempat plugin menampilkan beberapa aturan penulisan ulang dengan gambar pratinjau berwarna merah. Klik "Sisipkan Aturan Penulisan Ulang" untuk menambahkan aturan ini ke berkas .htaccess Anda secara otomatis.

Jika berhasil, gambar pratinjau akan berubah menjadi hijau, diberi label "WebP".

Untuk mengonversi gambar yang diunggah sebelumnya ke WebP, buka Media > Perpustakaan dan alihkan ke tampilan daftar. Sesuaikan jumlah item per halaman melalui Opsi Layar untuk memilih banyak foto sekaligus. Gunakan kotak centang Pilih Semua, pilih Optimalkan Massal dari menu tarik-turun, lalu klik Terapkan.

Plugin ini memungkinkan Anda melewati kompresi dan hanya mengonversi gambar ke WebP jika sudah dioptimalkan. Klik Pindai Gambar yang Belum Dioptimalkan dan centang WebP saja.

Setelah selesai, EWWW akan membuat versi WebP untuk semua gambar yang dipilih.

Untuk memastikan pengiriman WebP berfungsi, buka postingan yang berisi beberapa gambar. Klik kanan gambar dan pilih "Buka di tab baru". Jika URL diakhiri dengan .webp, berarti situs WordPress Anda berhasil menayangkan gambar WebP.

Menggunakan gambar WebP di WordPress dengan ShortPixel

ShortPixel adalah salah satu plugin optimasi gambar WordPress yang paling banyak digunakan, dirancang untuk mengubah ukuran dan mengompres gambar yang diunggah ke situs web Anda secara otomatis. Di antara fitur-fiturnya, plugin ini juga memungkinkan Anda mengonversi gambar ke format WebP dan menampilkannya di peramban yang mendukung format modern ini, sehingga meningkatkan kecepatan pemuatan halaman dan kinerja secara keseluruhan.

Plugin ini menghitung setiap ukuran gambar yang Anda optimalkan sebagai kredit, yang berarti mengoptimalkan beberapa ukuran thumbnail untuk satu gambar dapat menggunakan beberapa kredit. Tidak ada batasan ukuran file, dan Anda dapat mendistribusikan kredit ShortPixel Anda ke sejumlah situs web tanpa batas, semuanya dalam satu akun ShortPixel, sehingga fleksibel untuk mengelola beberapa situs.

Untuk mulai menyajikan gambar WebP dengan ShortPixel, Anda perlu menginstal plugin dari WordPress.org.

Lalu masukkan kunci API Anda, yang bisa Anda peroleh dengan mendaftar akun ShortPixel gratis.

Di tab Pengaturan Umum, Anda dapat mengonfigurasi preferensi pengoptimalan dasar, seperti tingkat kompresi dan pengubahan ukuran gambar. Untuk mengaktifkan pengiriman WebP, aktifkan Mode Lanjutan. Setelah itu, aktifkan Buat Gambar WebP dan Sajikan Gambar WebP/AVIF... Setelah selesai, pilih opsi Gunakan sintaksis tag . Setelah selesai, klik Simpan .

Menggunakan gambar WebP di WordPress dengan Imagify

Imagify adalah plugin pengoptimalan gambar untuk WordPress yang dikembangkan oleh tim di balik WP Rocket, plugin caching terkemuka. Plugin ini menyediakan cara mudah untuk mengompres gambar dan mengonversinya ke format WebP untuk pemuatan yang lebih cepat dan kinerja yang lebih baik.

Untuk memulai, instal dan aktifkan plugin Imagify di situs WordPress Anda. 

Setelah diaktifkan, buka Pengaturan > Imagify untuk mengonfigurasi plugin. Klik "Buat Kunci API Gratis" , lalu masukkan alamat email yang valid. Anda akan menerima email berisi kunci API Anda, yang harus Anda salin dan tempel ke pengaturan plugin, lalu klik "Simpan Perubahan".

Selanjutnya, gulir ke bagian Optimasi, klik WEBP, dan aktifkan bersama dengan "Tampilkan gambar dalam format Next-GEN di situs".

Imagify menawarkan dua metode untuk mengirimkan gambar WebP, yaitu metode .htaccess dan metode tag. Metode .htaccess lebih cepat tetapi mungkin tidak berfungsi jika Anda menggunakan CDN, sementara metode tag kompatibel dengan CDN tetapi berpotensi konflik dengan beberapa tema. Pilih metode yang paling sesuai dengan pengaturan Anda dan klik "Simpan & Buka Pengoptimal Massal".

Di Media > Optimasi Massal , plugin akan otomatis mulai memproses semua gambar di latar belakang. Jika situs Anda memiliki banyak foto, prosesnya mungkin memakan waktu.

Untuk memverifikasi bahwa gambar WebP terkirim, buka postingan atau halaman yang berisi foto, klik kanan gambar, lalu pilih "Buka gambar di tab baru". URL gambar harus diakhiri dengan .webp, yang mengonfirmasi bahwa Imagify berhasil menayangkan versi WebP di situs WordPress Anda.

Selain mengoptimalkan gambar dengan plugin, pertimbangkan untuk menggunakan WP Media Folder untuk mengelola pustaka media WordPress Anda dengan lebih baik. Plugin ini membantu mengatur gambar ke dalam folder, sehingga memudahkan penanganan media dalam jumlah besar, sekaligus terintegrasi secara mulus dengan plugin pengoptimalan gambar untuk memastikan berkas WebP Anda selalu terkelola dengan baik.

Manfaat WebP untuk optimasi kinerja

WebP adalah format gambar modern yang dirancang untuk meningkatkan kinerja situs web dengan mengurangi ukuran berkas tanpa mengorbankan kualitas. Penggunaan WebP di situs WordPress membantu halaman dimuat lebih cepat, memberikan pengalaman menjelajah yang lebih lancar, dan mengurangi penggunaan bandwidth, menjadikannya alat yang berharga untuk optimasi situs web.

Ukuran file lebih kecil

Gambar WebP jauh lebih kecil daripada format tradisional seperti JPEG dan PNG, seringkali mengurangi ukuran berkas hingga 25–35% dengan tetap mempertahankan kualitas visual yang sama. Pengurangan ukuran ini memungkinkan halaman web dimuat lebih cepat, yang khususnya penting untuk situs dengan banyak gambar, seperti portofolio, toko e-commerce, atau blog fotografi.

File yang lebih kecil juga membantu mengelola penyimpanan di server hosting Anda. Dengan mengoptimalkan ukuran gambar, Anda mengurangi total ruang disk yang digunakan, sehingga proses pencadangan menjadi lebih cepat dan efisien sekaligus menjaga situs web Anda tetap berjalan lancar.

Pemuatan halaman lebih cepat

Karena gambar WebP lebih ringan, peramban dapat mengunduhnya lebih cepat, yang secara langsung mempercepat waktu pemuatan halaman. Hal ini penting untuk pengalaman pengguna, karena halaman yang lambat dimuat sering kali membuat pengunjung frustrasi dan meningkatkan rasio pentalan, terutama pada perangkat seluler dengan koneksi internet yang lebih lambat.

Waktu pemuatan yang lebih cepat juga memudahkan penerapan peningkatan performa lainnya, seperti lazy loading dan caching, karena gambar itu sendiri tidak lagi menjadi hambatan. Hal ini memastikan situs Anda terasa responsif dan lancar bagi pengguna.

Performa SEO yang lebih baik

Kecepatan situs web merupakan faktor krusial dalam peringkat mesin pencari, dan pemanfaatan WebP dapat berdampak positif pada SEO Anda. Halaman yang dimuat lebih cepat meningkatkan metrik keterlibatan pengguna, seperti waktu di situs dan penurunan rasio pentalan, yang ditafsirkan oleh mesin pencari sebagai sinyal konten berkualitas.

Selain itu, WebP memungkinkan situs mempertahankan visual berkualitas tinggi tanpa penurunan performa, artinya Anda dapat mempertahankan gambar yang menarik dan detail tanpa mengorbankan SEO. Keseimbangan estetika dan kecepatan ini membantu menarik dan mempertahankan lebih banyak pengunjung.

Mengurangi bandwidth dan beban server

File WebP yang lebih kecil mengonsumsi bandwidth lebih sedikit, yang sangat bermanfaat untuk situs web dengan lalu lintas tinggi. Mengurangi jumlah data yang dikirim untuk setiap tampilan halaman dapat menurunkan biaya hosting dan mencegah kelebihan beban server selama periode lalu lintas puncak.

Beban server yang lebih rendah juga meningkatkan keandalan situs web secara keseluruhan. Dengan beban sumber daya yang lebih rendah, halaman tetap mudah diakses dan cepat, bahkan ketika banyak pengguna mengakses situs secara bersamaan, menciptakan pengalaman yang lebih baik bagi semua orang.

Mendukung fitur web modern

WebP mendukung kompresi lossy dan lossless, serta fitur-fitur seperti transparansi dan animasi. Fleksibilitas ini memungkinkannya untuk menggantikan berbagai format gambar lama, menyederhanakan pengelolaan gambar sambil tetap mempertahankan kualitasnya.

Dengan mendukung fitur-fitur modern, WebP memungkinkan situs web menggunakan efek visual canggih tanpa mengorbankan performa. Desainer dapat menggabungkan gambar berkualitas tinggi, grafik animasi, atau overlay transparan, semuanya sambil mempertahankan kecepatan halaman yang optimal.

Kesimpulan

Menggunakan gambar WebP di WordPress dapat meningkatkan kecepatan, efisiensi, dan performa situs web Anda secara signifikan. Dengan mengonversi foto Anda ke format WebP, Anda mengurangi ukuran file tanpa kehilangan kualitas visual, yang membantu halaman dimuat lebih cepat, mengurangi beban server, dan memberikan pengalaman yang lebih lancar bagi pengunjung di berbagai perangkat. Menerapkan WebP juga melengkapi strategi optimasi lainnya, seperti caching dan penggunaan CDN, untuk memastikan situs WordPress Anda berjalan secara efisien.

Secara keseluruhan, mengadopsi gambar WebP menawarkan banyak manfaat, termasuk pemuatan halaman yang lebih cepat, peningkatan SEO, pengurangan penggunaan bandwidth, dan dukungan untuk fitur web modern seperti transparansi dan animasi. Baik Anda menggunakan plugin seperti EWWW Optimizer, ShortPixel, atau Imagify, maupun menerapkan solusi berbasis server, beralih ke WebP memastikan situs web Anda tetap menarik secara visual sekaligus memberikan performa optimal bagi semua pengguna. Untuk manajemen perpustakaan media yang lebih baik, pertimbangkan untuk menggunakan WP Media Folder untuk mengatur gambar Anda secara efisien dan mempermudah pengoptimalan WebP.