Apakah kamu 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 kamu memuat lebih cepat dan menghemat bandwidth.
Pada artikel ini, Saya akan menunjukkan kepada kamu 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 kamu akan berukuran 25-34% lebih kecil daripada PNG dan JPEG tanpa kehilangan kualitas.
Jika gambar memperlambat situs web kamu, mengonversinya ke format WebP dapat meningkatkan skor tes kecepatan muat halaman kamu.
Untuk mempelajari lebih lanjut tentang kompresi gambar, lihat panduan Saya 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 kamu Menggunakan Gambar WebP di WordPress?
Gambar WebP dapat membantu kamu mempercepat situs WordPress kamu. 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, kamu perlu menggunakan plugin kompresi gambar untuk mengubah gambar menjadi format gambar WebP. kamu masih akan mengupload gambar kamu dalam format file yang didukung WordPress seperti PNG, JPEG, dan GIF, sehingga dapat digunakan sebagai cadangan.
BACA JUGA : Cara Mengatasi Indexed Blocked by robot.txt
Jika situs kamu menggunakan banyak gambar, dan memperlambat blog WordPress kamu, maka kamu harus mempertimbangkan untuk menggunakan gambar WebP.
Berikut adalah cara menggunakan gambar WebP di WordPress. saya akan menunjukkan kepada kamu beberapa metode, jadi kamu dapat memilih salah satu yang paling sesuai untuk kamu:
- 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 kamu untuk mengoptimalkan gambar WordPress kamu. Ini juga mendukung Gambar WebP dan dapat secara otomatis menampilkannya di browser yang didukung.
Hal pertama yang perlu kamu lakukan adalah menginstal dan mengaktifkan plugin EWWW Image Optimizer. Untuk lebih jelasnya, lihat panduan langkah demi langkah Saya tentang cara memasang plugin WordPress.
Setelah aktivasi, buka halaman Settings »EWWW Image Optimizer untuk mengkonfigurasi opsi plugin. kamu akan disambut oleh wizard penyiapan, tetapi kamu dapat mengeklik tautan ‘Saya tahu apa yang saya lakukan’ untuk keluar dari wizard.
Di layar berikutnya, kamu akan melihat banyak opsi plugin. Gulir ke bawah dan centang kotak di samping opsi ‘WebP Conversion’.
Setelah itu, klik tombol Save Changes untuk menyimpan pengaturan kamu.
Selanjutnya, kamu perlu menggulir ke bawah ke bagian Konversi WebP. Plugin sekarang akan menunjukkan kepada kamu beberapa aturan penulisan ulang dengan gambar pratinjau merah.
kamu perlu mengklik tombol ‘Insert Rewrite Rules’, dan plugin akan secara otomatis mencoba memasukkan aturan penulisan ulang ini ke file .htaccess kamu.
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, kamu perlu menyalin aturan penulisan ulang dari halaman setelan plugin dan menempelkannya di bagian bawah file .htaccess kamu secara manual.
Setelah kamu selesai, kembali ke halaman setelan plugin dan klik tombol Simpan Perubahan lagi. Jika gambar pratinjau berubah menjadi hijau, berarti kamu telah berhasil mengaktifkan pengiriman gambar WebP di situs WordPress kamu.
Sebagai alternatif, kamu dapat memilih dari metode Penulisan Ulang JS WebP atau <picture> Penulisan Ulang WebP sebagai opsi pengiriman WebP kamu. Ini sedikit lebih lambat daripada metode .htaccess, tetapi akan menyelesaikan pekerjaan.
Konversi Massal Gambar Lama kamu ke Versi WebP
Pengoptimal Gambar EWWW memungkinkan kamu dengan mudah mengkonversi file gambar yang sebelumnya diunggah ke gambar WebP. Cukup buka halaman Media »Perpustakaan dan beralih ke tampilan daftar.
Selanjutnya, kamu perlu mengklik tombol Screen Options dan mengubah ‘Number of items per page’ menjadi 999. Jika kamu memiliki 1000+ gambar, gambar tersebut akan muncul di halaman berikutnya.
Dengan cara ini kamu 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 kamu opsi untuk melewati kompresi gambar dan hanya mengubahnya menjadi WebP. kamu dapat memeriksa opsi ini jika gambar kamu sudah dioptimalkan.
Setelah itu, klik tombol ‘Scan for Unoptimized Images’ untuk melanjutkan. Plugin kemudian akan menunjukkan jumlah gambar yang ditemukan, sehingga kamu dapat mengklik tombol Optimalkan untuk melanjutkan.
Gambar kamu sekarang akan dioptimalkan, dan pengoptimal EWWW akan menghasilkan versi WebP untuk gambar kamu.
Menguji Pengiriman Gambar WebP kamu
Setelah kamu mengoptimalkan gambar kamu, kamu 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 kamu akan dapat melihat bahwa itu memiliki ekstensi .webp di bilah alamat.
Jika plugin tidak dapat menampilkan gambar webp, kamu dapat kembali ke halaman setelan plugin. Dari sini, kamu 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 kamu untuk dengan mudah mengoptimalkan dan mengonversi gambar ke format gambar WebP.
Hal pertama yang perlu kamu lakukan adalah menginstal dan mengaktifkan plugin Imagify. Untuk lebih jelasnya, lihat panduan langkah demi langkah Saya tentang cara memasang plugin WordPress.
Setelah aktivasi, kamu perlu mengunjungi halaman Settings »Imagify untuk mengkonfigurasi pengaturan plugin. Dari sini. klik tombol ‘Buat Kunci API Gratis’ untuk melanjutkan.
kamu akan diminta untuk memasukkan alamat email bisnis setelah itu kamu dapat memeriksa kotak masuk kamu untuk email yang berisi kunci API kamu. Salin dan tempel kunci pada halaman pengaturan plugin dan klik tombol Simpan Perubahan.
Selanjutnya, kamu perlu scroll ke bawah ke bagian Pengoptimalan. Di sana kamu perlu memeriksa opsi di samping opsi ‘Create webp versions of images’ dan ‘Display images in webp format on the site’.
Di bawahnya, kamu 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 kamu menggunakan layanan CDN. Metode tag <picture> juga berfungsi dengan CDN, tetapi dapat merusak beberapa tema WordPress.
kamu dapat memilih salah satu yang berfungsi dengan baik untuk situs kamu. Setelah itu, klik tombol ‘Save & go to bulk optimizer’ di bagian bawah.
Ini akan membawa kamu ke halaman Media » Bulk Optimization page. Plugin secara otomatis akan mulai mengoptimalkan semua gambar WordPress kamu di latar belakang.
Jika kamu memiliki banyak gambar, mungkin perlu waktu agak lama. Jangan khawatir, kamu dapat menutup halaman dan kembali lagi nanti karena menutup halaman tidak akan menghentikan proses pengoptimalan gambar.
Menguji Gambar WebP kamu di WordPress
Setelah pengoptimalan selesai, kamu dapat mengunjungi halaman atau posting yang berisi beberapa gambar. Arahkan mouse kamu ke gambar, lalu klik kanan untuk memilih ‘Open image in new tab’.
Ini akan membuka gambar di tab browser baru, dan kamu akan dapat melihat ekstensi .webp di bilah alamat.
Metode 3. Menggunakan Gambar WebP di WordPress dengan SG Optimizer
Metode ini direkomendasikan jika kamu adalah pengguna SiteGround.
SiteGround adalah salah satu perusahaan hosting WordPress terbaik. Mereka menawarkan plugin SG Optimizer gratis untuk penggunanya yang memungkinkan kamu untuk mengoptimalkan kinerja WordPress kamu. Ini juga termasuk opsi untuk mengoptimalkan gambar WordPress.
Pertama, kamu perlu menginstal dan mengaktifkan plugin SG Optimizer.
Setelah aktivasi, plugin akan menambahkan item menu baru ke sidebar admin kamu berlabel ‘SG Optimizer’. Mengkliknya akan membawa kamu ke halaman pengaturan plugin.
Dari sini kamu dapat mengaktifkan setelan cache jika kamu ingin menggunakan sistem cache bawaan SiteGround.
Setelah itu, kamu dapat beralih ke tab Pengoptimalan Media dan mengaktifkan opsi ‘Generate WebP Copies of New Images’.
Di bawahnya, kamu akan melihat opsi untuk ‘Bulk Generate WebP Files’. Mengkliknya akan mulai menghasilkan salinan WebP untuk semua file gambar di perpustakaan media WordPress kamu.
Setelah selesai, situs WordPress kamu akan mulai menampilkan gambar WebP.
Menguji Gambar WebP di SG Optimizer
Untuk melihat apakah situs web kamu menyajikan gambar WebP, kamu perlu membuka halaman di situs kamu dengan beberapa gambar.
Setelah itu klik kanan dan pilih Inspect tool. Ini akan membuka konsol pengembang tempat kamu 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 kamu dimuat ulang, kamu akan melihat semua gambar dimuat di konsol pengembang.
