Cara Menggunakan Gambar WebP di WordPress

Apakah kamu ingin menggunakan format gambar WebP di WordPress? Jika iya, sekarang kamu sudah berada di halaman yang tepat.

WebP adalah format gambar modern yang di kembangkan oleh Google, format ini menawarkan kompresi gambar yang lebih baik dengan mengurangi ukuran file. Akan sangat berpengaruh dalam hal kecepatan loading server dan dapat menghemat bandwidht.

Pada artikel ini, kami akan menunjukkan cara mudah menggunakan gambar WebP di WordPress.

Mengapa Harus Menggunakan Format Gambar WebP di WordPress

WebP adalah format file gambar baru yang di kembangkan untuk website. Dengan menggunakan format WebP, gambar akan berukuran lebih kecil 25-34% daripada PNG atau JPEG tanpa menghilangkan kualitasnya.

Karena salah satu faktor yang dapat mempengaruhi kecepatan pemuatan website adalah gambar, jadi sangat penting bagi kamu sebagai pemilik situs untuk melakukan konversi ke format WebP untuk meningkatkan skor kecepatan loading.

Tetapi hal yang perlu kamu ketahui jika ingin menggunakan format ini adalah tidak semua browser mendukungnya. Namun, sebagian besar browser modern seperti Google Chrome, Mozilla Firefox, dan Microsoft Edge sudah mendukungnya.

Sejak update versi WordPress 5.8, WordPress sudah mendukung format gambar WebP secara default. Ini berarti kamu dapat menyimpan dan mengunggah gambar WebP ke situs WordPress tanpa menggunakan plugin.

Namun setelah mengetahui fakta masih belum ada browser yang mendukung format gambar ini. Kamu harus mempertimbangkan bahwa menggunakan plugin kompresi akan sangat tepat untuk dilakukan ketika banyak pengguna menggunakan browser yang tidak mendukungnya.

Salah satu fitur keren yang dimiliki oleh beberapa plugin kompresi adalah mengonversi gambar ke dalam format WebP dan menampilkan gambar JPEG atau PNG sebagai opsi untuk browser yang belum mendukung WebP.

Plugin Konversi Gambar WebP di WordPress

Ada beberapa plugin populer yang dapat kamu gunakan untuk mengonversi format gambar ke WebP. Kami akan membaginya menjadi beberapa metode sehingga mudah untuk di pahami.

Metode 1: Menggunakan Gambar WebP di WordPress Dengan Plus WebP

Plus WebP adalah plugin yang kami gunakan pada situs letsot.com. Fungsi dari plugin ini secara otomatis akan mengonversi file gambar yang di upload menjadi WebP. Sehingga kamu tidak perlu melakukan konversi manual yang cukup memakan waktu.

Hal yang harus kamu lakukan adalah menginstal dan mengaktifkan plugin Plus WebP. Untuk detail lebih lanjut lihat panduan kami tentang cara menginstal plugin di WordPress.

Setelah berhasil di aktivasi, buka Tools > Plus WebP dari panel samping admin WordPress untuk mulai mengonfigurasi plugin.

Seperti yang terlihat, ada beberapa opsi yang dapat kamu gunakan untuk membuat file WebP menggunakan plugin ini, kami akan menjelaskan fungsi dari masing-masing opsi.

• Generate: Jika kamu mengklik opsi ini, secara otomatis file gambar yang ada di website akan di konversi menjadi format WebP secara massal dan kamu bisa melihat prosesnya.
• Generate Background: Secara otomatis mengonversi file gambar menjadi WebP, tapi proses yang berjalan akan terjadi di latar belakang dan nantinya kamu akan mendapatkan email ketika proses sudah selesai.
• Quality: Menentukan kualitas format WebP. Semakin tinggi resolusi, semakin besar ukuran file.
• Type: Pada opsi ini, kamu bisa memilih format gambar yang akan secara otomatis di konversi ke WebP.
• Append the webp extension to the original filename: Jika kamu memberi tanda centang, secara otomatis WebP akan di tambahkan ke format file misalnya “image.jpg” akan menjadi “image.jpg.webp” dan ketika tidak di centang maka format file akan di ubah ke WebP sehingga menjadi “image.webp”.
• WebP replacement of images and contents: Mencentang pengaturan ini akan mengganti file gambar dengan WebP saat menambahkan media baru, dan menghapus file gambar asli. Juga, saat membuat semua gambar, ID file gambar asli akan ditimpa sebagai WebP dan file gambar asli akan dihapus. Semua URL dalam konten juga diganti.

Jangan lupa untuk mengklik tombol Save Changes ketika sudah selesai melakukan pengaturan.

Metode 2: Menggunakan Gambar WebP di WordPress Dengan EWWW Optimizer

EWWW Image Optimizer merupakan plugin kompresi gambar yang memungkinkan kamu untuk mengoptimalkan gambar di situs WordPress. Ini juga mendukung format WebP dan dapat secara otomatis menampilkan di browser yang mendukungnya.

Untuk dapat menggunakan plugin ini, kamu harus menginstal dan mengaktifkan plugin EWWW Image Optimizer. Lihat panduan kami lebih lanjut tentang cara memasang plugin di WordPress.

Buka halaman konfigurasi plugin dengan pergi ke Settings > EWWW Image Optimizer. Akan muncul wizard pengaturan tapi kamu dapat melewatinya dengan mengklik “I know what I’m doing, leave me alone!”.

Di layar berikutnya, kamu akan melihat opsi plugin. Scroll ke bawah dan beri centang pada kotak di sebelah “WebP Conversion”.

Setelah di beri tanda centang, akan muncul beberapa aturan penulisan ulang dengan gambar pratinjau merah.

Sekarang kamu perlu mengklik tombol Insert Rewrite Rules, dan secara otomatis plugin akan memasukkan aturan penulisan tersebut ke file .htaccess.

Jika berhasil menambahkan aturan tersebut, maka gambar yang awalnya merah akan menjadi hijau dengan tulisan “WebP”.

Dalam beberapa kasus, plugin tidak dapat menyisipkan aturan secara otomatis. Sehingga kamu perlu menyalin kode tersebut dan menempelkannya secara manual ke dalam file .htaccess.

Setelah selesai, kamu bisa kembali ke halaman pengaturan plugin dan klik tombol Save Changes. Jika gambar pratinjau berwarna hijau, berarti kamu telah berhasil mengaktifkan pengiriman gambar WebP di WordPress.

Sebagai alternatif, kamu juga dapat memilih metode JS WebP Rewriting atau <picture> WebP Rewriting sebagai opsi pengiriman WebP. Mungkin akan sedikit lebih lambat dari metode .htaccess, tapi ini juga berguna.

Cara Konversi Massal Gambar Lama ke Format WebP

Plugin ini juga memungkinkan kamu untuk melakukan konversi massal pada gambar yang di unggah sebelumnya ke format WebP.

Caranya, buka Media > Library dan ubah tampilan ke daftar. Selanjutnya klik Screen Options yang ada di sudut kanan atas dan atur jumlah tampilan item ke 999. Jika kamu memiliki lebih dari 1000 gambar, maka akan muncul di halaman berikutnya.

Dengan cara ini akan sangat cepat untuk memilih gambar yang ingin di optimalkan. Kemudian beri tanda centang untuk memilih semua gambar dalam daftar.

Dan pada menu dropdown Bulk Action pilih opsi Bulk Optimize. Jika sudah klik Apply.

Di halaman berikutnya, plugin akan memberi kamu opsi untuk melewati kompresi gambar dan hanya melakukan konversi ke WebP.

Setelah itu, klik tombol Scan for Unoptimized Images untuk melanjutkan.

Kemudian plugin akan menunjukkan jumlah gambar yang ditemukan, dan kamu bisa mengklik tombol Optimize untuk memulai proses.

Sekarang gambar akan di optimalkan, dan plugin akan menghasilkan format WebP dari gambar tersebut.

Metode 3: Menggunakan Gambar WebP di WordPress Dengan Imagify

Imagify adalah plugin optimasi gambar untuk WordPress yang di kembangkan oleh tim WP Rocket. Plugin ini memungkinkan kamu untuk dengan mudah mengoptimalkan dan mengonversi gambar ke format WebP.

Yang harus kamu lakukan pertama kali untuk menggunakan Imagify adalah menginstal dan mengaktifkannya. Detail lebih lanjut kamu bisa melihat panduan kami tentang cara memasang plugin WordPress.

Setelah berhasil di aktivasi, buka Settings > Imagify untuk membuka halaman pengaturan plugin, kemudian klik tombol Create a Free Api Key yang berwarna hijau.

Akan muncul popup yang meminta kamu untuk memasukkan email, setelah itu kamu bisa melihat kotak masuk yang berisi kunci API. Salin dan tempel kunci ke halaman pengaturan plugin dan klik tombol Save Changes.

Selanjutnya, scroll kebawah pada bagian Optimazion. Beri tanda centang pada kotak “Create webp versions of images” dan “Display images in webp format on the site”.

Di bawahnya kamu dapat memilih salah satu dari dua metode pengiriman untuk menampilkan gambar WebP di WordPress. Yang pertama menggunakan metode file .htaccess, dan yang kedua menggunakan tag <picture>.

Jika kamu memilih menggunakan metode file .htaccess proses akan lebih cepat, tetapi kekurangannya adalah metode ini tidak akan berfungsi jika kamu menggunakan layanan CDN. Metode <picture> cukup berfungsi dengan CDN, tetapi kadang juga mengalami masalah dengan tema pada beberapa kasus.

Kamu dapat memilih salah satu metode yang bekerja dengan baik pada website kamu. Setelah itu, klik tombol Save & go to bulk optimizer berwarna hijau di bawah.

Kamu akan di arahkan ke halaman Media > Bulk Optimization. Dan secara otomatis plugin akan mulai mengoptimalkan semua gambar yang ada pada situs WordPress di latar belakang.

Jika kamu memiliki banyak gambar, ini akan membutuhkan waktu yang cukup lama. Tetapi tidak perlu menunggu sampai selesai, karena kamu masih dapat membuka halaman lainnya dan proses tidak akan terhenti.

Sampai disini kamu sudah bisa menggunakan gambar WebP di WordPress. Mungkin kamu juga berminat melihat artikel kami lainnya tentang cara mengubah nama pengguna WordPress.

Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.