3 Cara Jitu Menggunakan Image WebP di Website Wordpress

[digitalmind]

Apakah Anda ingin menggunakan gambar WebP di WordPress?

Gambar WebP adalah format gambar modern yang menawarkan kompresi gambar yang lebih baik dengan mengurangi ukuran file. Ini membuat situs web Anda memuat lebih cepat dan menghemat bandwidth.

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

Apa itu WebP & Mengapa Menggunakan Gambar WebP di WordPress?

WebP adalah format file baru untuk gambar yang akan digunakan di web. Dengan menggunakan format gambar WebP, gambar Anda akan berukuran 25-34% lebih kecil daripada PNG dan JPEG tanpa kehilangan kualitas.

Jika gambar memperlambat situs web Anda, mengonversinya ke format WebP dapat meningkatkan skor tes kecepatan muat halaman Anda.

Untuk mempelajari lebih lanjut tentang kompresi gambar, lihat panduan kami tentang cara mengoptimalkan gambar untuk web.

Karena WebP adalah format file baru, ini belum didukung oleh semua browser. Namun, sebagian besar browser modern seperti Google Chrome, Firefox, dan Microsoft Edge mendukung gambar WebP.

Haruskah Anda Menggunakan Gambar WebP di WordPress?

Gambar WebP dapat membantu Anda mempercepat situs WordPress Anda. Ini adalah praktik terbaik yang direkomendasikan untuk digunakan bersama dengan plugin caching WordPress, CDN, dan banyak lagi.

Secara default, WordPress tidak mendukung gambar WebP dan mengupload gambar WebP akan menampilkan kesalahan.



Untuk memperbaikinya, Anda perlu menggunakan plugin kompresi gambar untuk mengubah gambar menjadi format gambar WebP. Anda masih akan mengupload gambar Anda dalam format file yang didukung WordPress seperti PNG, JPEG, dan GIF, sehingga dapat digunakan sebagai cadangan.

Jika situs Anda menggunakan banyak gambar, dan memperlambat blog WordPress Anda, maka Anda harus mempertimbangkan untuk menggunakan gambar WebP.

Berikut adalah cara menggunakan gambar WebP di WordPress. Kami akan menunjukkan kepada Anda beberapa metode, jadi Anda dapat memilih salah satu yang paling sesuai untuk Anda:

    Menggunakan Gambar WebP di WordPress dengan EWWW Optimizer
    Menggunakan Gambar WebP di WordPress dengan WP Rocket
    Menggunakan Gambar WebP di WordPress dengan SG Optimizer

Metode 1. Menggunakan Gambar WebP di WordPress dengan EWWW Optimizer

Plugin Pengoptimal Gambar EWWW adalah salah satu plugin kompresi gambar WordPress terbaik yang memungkinkan Anda untuk mengoptimalkan gambar WordPress Anda. Ini juga mendukung Gambar WebP dan dapat secara otomatis menampilkannya di browser yang didukung.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin EWWW Image Optimizer. Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah aktivasi, buka halaman Settings »EWWW Image Optimizer untuk mengkonfigurasi opsi plugin. Anda akan disambut oleh wizard penyiapan, tetapi Anda dapat mengeklik tautan 'Saya tahu apa yang saya lakukan' untuk keluar dari wizard.



Di layar berikutnya, Anda akan melihat banyak opsi plugin. Gulir ke bawah dan centang kotak di samping opsi 'Konversi WebP'.



Setelah itu, klik tombol Save Changes untuk menyimpan pengaturan Anda.

Selanjutnya, Anda perlu menggulir ke bawah ke bagian Konversi WebP. Plugin sekarang akan menunjukkan kepada Anda beberapa aturan penulisan ulang dengan gambar pratinjau merah.

Anda perlu mengklik tombol 'Insert Rewrite Rules', dan plugin akan secara otomatis mencoba memasukkan aturan penulisan ulang ini ke file .htaccess Anda.



Jika plugin berhasil menambahkan aturan tersebut, maka pratinjau gambar berwarna merah akan berubah menjadi hijau dengan teks 'WebP'.



Terkadang, plugin mungkin tidak dapat memasukkan aturan. Jika demikian, Anda perlu menyalin aturan penulisan ulang dari halaman setelan plugin dan menempelkannya di bagian bawah file .htaccess Anda secara manual.

Setelah Anda selesai, kembali ke halaman setelan plugin dan klik tombol Simpan Perubahan lagi. Jika gambar pratinjau berubah menjadi hijau, berarti Anda telah berhasil mengaktifkan pengiriman gambar WebP di situs WordPress Anda.

Sebagai alternatif, Anda dapat memilih dari metode Penulisan Ulang JS WebP atau <picture> Penulisan Ulang WebP sebagai opsi pengiriman WebP Anda. Ini sedikit lebih lambat daripada metode .htaccess, tetapi akan menyelesaikan pekerjaan.

Konversi Massal Gambar Lama Anda ke Versi WebP

Pengoptimal Gambar EWWW memungkinkan Anda dengan mudah mengkonversi file gambar yang sebelumnya diunggah ke gambar WebP. Cukup buka halaman Media »Perpustakaan dan beralih ke tampilan daftar.



Selanjutnya, Anda perlu mengklik tombol Screen Options dan mengubah 'Number of items per page' menjadi 999. Jika Anda memiliki 1000+ gambar, gambar tersebut akan muncul di halaman berikutnya.

Dengan cara ini Anda akan dapat dengan cepat memilih sejumlah besar gambar untuk pengoptimalan massal. Selanjutnya, klik pada kotak centang Pilih Semua di bagian atas untuk memilih semua gambar.



Setelah itu, klik menu drop-down Tindakan Massal dan pilih opsi Bulk Actions. Terakhir, klik tombol Apply.

Di layar berikutnya, plugin akan memberi Anda opsi untuk melewati kompresi gambar dan hanya mengubahnya menjadi WebP. Anda dapat memeriksa opsi ini jika gambar Anda sudah dioptimalkan.



Setelah itu, klik tombol 'Scan for Unoptimized Images' untuk melanjutkan. Plugin kemudian akan menunjukkan jumlah gambar yang ditemukan, sehingga Anda dapat mengklik tombol Optimalkan untuk melanjutkan.

Gambar Anda sekarang akan dioptimalkan, dan pengoptimal EWWW akan menghasilkan versi WebP untuk gambar Anda.



Menguji Pengiriman Gambar WebP Anda

Setelah Anda mengoptimalkan gambar Anda, Anda dapat pergi ke posting blog atau halaman yang berisi beberapa gambar. Arahkan mouse ke gambar mana pun dan klik kanan untuk membuka gambar di tab baru.



Ini akan membuka gambar di tab browser baru, dan Anda akan dapat melihat bahwa itu memiliki ekstensi .webp di bilah alamat.



Jika plugin tidak dapat menampilkan gambar webp, Anda dapat kembali ke halaman setelan plugin. Dari sini, Anda dapat mengubah opsi pengiriman WebP menjadi metode 'JS WebP Rewriting' atau '<picture> WebP Rewriting'.

Metode 2. Menggunakan Gambar WebP di WordPress dengan Imagify

Imagify adalah plugin pengoptimalan gambar WordPress yang dibuat oleh orang-orang di balik WP Rocket, plugin caching WordPress terbaik. Ini memungkinkan Anda untuk dengan mudah mengoptimalkan dan mengonversi gambar ke format gambar WebP.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin Imagify. Untuk lebih jelasnya, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.

Setelah aktivasi, Anda perlu mengunjungi halaman Settings »Imagify untuk mengkonfigurasi pengaturan plugin. Dari sini. klik tombol 'Buat Kunci API Gratis' untuk melanjutkan.



Anda akan diminta untuk memasukkan alamat email bisnis setelah itu Anda dapat memeriksa kotak masuk Anda untuk email yang berisi kunci API Anda. Salin dan tempel kunci pada halaman pengaturan plugin dan klik tombol Simpan Perubahan.

Selanjutnya, Anda perlu scroll ke bawah ke bagian Pengoptimalan. Di sana Anda perlu memeriksa opsi di samping opsi 'Create webp versions of images' dan 'Display images in webp format on the site'.



Di bawahnya, Anda dapat memilih dari dua metode pengiriman untuk menampilkan gambar WebP di WordPress. Yang pertama adalah metode .htaccess, dan yang kedua adalah dengan menggunakan tag <picture>.

Metode .htaccess lebih cepat, tetapi tidak berfungsi jika Anda menggunakan layanan CDN. Metode tag <picture> juga berfungsi dengan CDN, tetapi dapat merusak beberapa tema WordPress.

Anda dapat memilih salah satu yang berfungsi dengan baik untuk situs Anda. Setelah itu, klik tombol 'Save & go to bulk optimizer' di bagian bawah.



Ini akan membawa Anda ke halaman Media » Bulk Optimization page. Plugin secara otomatis akan mulai mengoptimalkan semua gambar WordPress Anda di latar belakang.



Jika Anda memiliki banyak gambar, mungkin perlu waktu agak lama. Jangan khawatir, Anda dapat menutup halaman dan kembali lagi nanti karena menutup halaman tidak akan menghentikan proses pengoptimalan gambar.

Menguji Gambar WebP Anda di WordPress

Setelah pengoptimalan selesai, Anda dapat mengunjungi halaman atau posting yang berisi beberapa gambar. Arahkan mouse Anda ke gambar, lalu klik kanan untuk memilih 'Open image in new tab'.


Ini akan membuka gambar di tab browser baru, dan Anda akan dapat melihat ekstensi .webp di bilah alamat.



Metode 3. Menggunakan Gambar WebP di WordPress dengan SG Optimizer

Metode ini direkomendasikan jika Anda adalah pengguna SiteGround.

SiteGround adalah salah satu perusahaan hosting WordPress terbaik. Mereka menawarkan plugin SG Optimizer gratis untuk penggunanya yang memungkinkan Anda untuk mengoptimalkan kinerja WordPress Anda. Ini juga termasuk opsi untuk mengoptimalkan gambar WordPress.

Pertama, Anda perlu menginstal dan mengaktifkan plugin SG Optimizer.

Setelah aktivasi, plugin akan menambahkan item menu baru ke sidebar admin Anda berlabel 'SG Optimizer'. Mengkliknya akan membawa Anda ke halaman pengaturan plugin.



Dari sini Anda dapat mengaktifkan setelan cache jika Anda ingin menggunakan sistem cache bawaan SiteGround.

Setelah itu, Anda dapat beralih ke tab Pengoptimalan Media dan mengaktifkan opsi 'Hasilkan Salinan WebP Gambar Baru'.



Di bawahnya, Anda akan melihat opsi untuk 'Bulk Generate WebP Files'. Mengkliknya akan mulai menghasilkan salinan WebP untuk semua file gambar di perpustakaan media WordPress Anda.



Setelah selesai, situs WordPress Anda akan mulai menampilkan gambar WebP.

Menguji Gambar WebP di SG Optimizer

Untuk melihat apakah situs web Anda menyajikan gambar WebP, Anda perlu membuka halaman di situs Anda dengan beberapa gambar.

Setelah itu klik kanan dan pilih Inspect tool. Ini akan membuka konsol pengembang tempat Anda perlu beralih ke tab Jaringan.



Dari sini, klik tab 'img' lalu muat ulang halaman (CTRL + R di Windows dan Command + R di Mac). Saat situs web Anda dimuat ulang, Anda akan melihat semua gambar dimuat di konsol pengembang.

[webcreator]

Rekomendasi plugin WebP yang bagus dong