Mengubah gambar menjadi format WebP memang menjadi salah satu langkah optimasi gambar di website, termasuk di WordPress. Dengan menggunakan format WebP, gambar menjadi lebih ringan dan berdampak pada peningkatan kecepatan website.
Format gambar WebP ini sendiri mulai dikembangkan sejak 30 September 2010. Namun format gambar ini memang masih kalah dari ekstensi lain seperti JPEG, PNG, dan GIF. Salah satu alasannya, karena tidak semua perangkat mendukung format gambar ini.
Bahkan, secara default WordPress tidak mendukung format gambar berekstensi .webp. Jika mengunggahnya, Anda akan mendapat pesan error “Sorry, this file type is not permitted for security reasons”.
Lantas bagaimana cara mengubah gambar menjadi format WebP di WordPress? Simak ulasan Panda lebih lanjut ya!
Apa itu Format Gambar WebP?
Gambar WebP adalah format gambar generasi baru yang dikembangkan Google menggunakan metode kompresi lossy dan lossless. Dengan metode kompresi ini, ukuran gambar bisa menjadi lebih kecil dengan tetap mempertahankan kualitas gambar aslinya.
Gambar dengan format WebP terbukti mempunyai kemampuan kompresi yang lebih optimal dari pendahulunya, yaitu PNG dan JPEG. Gambar lossless WebP rata- rata berukuran 26% lebih kecil dari PNG. Sedangkan gambar lossy WebP berukuran 25-34% lebih kecil dari gambar JPEG.
Kendati begitu, meski ukuran gambar WebP lebih kecil, namun kualitasnya hampir sama dengan format JPEG dan PNG.
Cara Upload Gambar WebP di WordPress Tanpa Plugin
Agar bisa mengunggah file gambar dengan format WebP, kita perlu menambah daftar gambar yang diizinkan oleh WordPress. Caranya yaitu dengan menambahkan kode berikut ini di file functions.php.
Untuk bisa mengaksesnya, Anda perlu masuk ke menu WordPress di Appearance > Editor > Functions.php. Selanjutnya, tambahkan kode berikut di baris paling bawah :
//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');
//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );
if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}
return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
Tips! Untuk keamanan tema, sebaiknya gunakan Child Theme WordPress saat melakukan perubahan di kode tema.
Dengan menambahkan kode di atas, kini library WordPress Anda sudah mendukung upload gambar dengan format WebP.
Cara Mengubah Format Gambar JPEG/PNG ke WebP di WordPress
Seperti yang Panda sebutkan sebelumnya, secara default WordPRess memang tidak mendukung ekstensi gambar WebP. Untuk itu, kita perlu melakukan konfigurasi tambahan agar Media Library WordPress mendukung ekstensi ini, seperti cara di atas.
Selain mengunggah gambar WebP ke WordPRess secara langsung dengan cara di atas. Anda bisa juga menggunakan plugin untuk mengkonversi gambar JPEG/PNG ke format WebP. Selain itu, beberapa plugin juga menyediakan gambar asli sebagai cadangan jika browser pengunjung itdak mendukung WebP.
Cara kerja plugin ini kurang lebih sebagai berikut :
- Gambar JPEG/PNG akan dikonversi ke WebP dan menggunakan versi WebP ke pengunjung yang menjelajah dengan browser yang sudah mendukung gambar WebP (Chrome, Firefox, dsb).
- Gambar akan tampil dengan format gambar asli ke pengunjung yang menjelajah dengan browser yang tidak mendukung WebP (Safar dan browser lain yang belum mendukung).
Dengan cara ini, artinya semua orang bisa melihat gambar Anda dengan pengalaman pengguna terbaik.
Berikut adalah beberapa rekomendasi plugin WordPress untuk menampilkan gambar WebP terbaik yang bisa Anda gunakan :
1. Mengubah Gambar WebP dengan Plugin Imagify
Imagify adalah plugin optimasi gambar yang populer dari pengembang yang sama dengan WP Rocket. Imagify bekerja secara otomatis mengubah ukuran gambar yang diunggah dan membantu mengkonversinya ke format WebP, lalu menyajikannya ke pengunjung dengan browser yang didukung.
Untuk menggunakan Imagify, sobat Panda perlu menginstall dan mengaktifkannya terlebih dulu. Setelah aktif, kunjungi menu Setting >> Imagify dan mulai lakukan konfigurasi API dengan mengklik tombol ‘Create a Free API Key”.
Setelah proses pembuatan kunci API selesai, Anda bisa scroll ke bagian Optimization, lanjutkan dengan :
- Centang opsi Create webp versions of images
- Centang opsi Display images in webp format
- Pilih opsi menggunakan tag picture
2. Webp Express
Plugin selanjutnya yang dapat Anda gunakan untuk mengubah gambar menjadi WebP di WordPress adalah plugin WebP Express. Setelah menginstal dan mengaktifkannya, berikut langkah- langkah yang perlu Anda terapkan :
- Masuk ke pengaturan plugin dengan buka menu Setting >> WebP Express
- Kemudian gunakan pengaturan berikut ini di bagian ‘General’ :
- Operation mode : CDN friendly
- Scope : ‘Upload only’
- Destination folder : ‘Mingled’
- Lainnya biarkan seperti default.
- Selanjutnya di bagian Conversion, gunakan pengaturan berikut :
- WebP encoding : Lossy
- Quality for lossy : Fixed quality & update angkanya ke 60 (semakin kecil angka, artinya ukuran file dan kualitasnya semakin menurun)
- WebP encoding : Lossless
- Quality for lossless: Apply preprocessing & update angkanya ke 60
- Di bagian terakhir, centang opsi Alter HTML.
- Di bagian bawah klik Save settings and force for new .htaccess rules.
Setelah selesai melakukan pengaturan ini, maka setiap gambar yang tampil oleh website merupakan gambar hasil konversi. Meski begitu, gambar asli akan tetap tersimpan di direktori.
3. Optimole
Optimole merupakan plugin optimasi gambar WordPress yang bekerja menyajikan gambar melalui CDN dengan dukungan Amazon CloudFront.
Plugin ini bisa menyajikan gambar adaptif real-time dimana optimasi gambar akan disajikan sesuai kebutuhan pengunjung. Misalnya, pengunjung yang menjelajah lewat layar kecil akan mengakses gambar beresolusi lebih rendah daripada seseorang yang menjelajah dengan layar retina.
Selain itu, Optimole juga menyajikan gambar WebP untuk pengunjung dengan browser yang mendukungnya.
Untuk menggunakan plugin ini, setelah menginstal, Anda perlu mengaktifkan API key nya secara gratis dengan mendaftarkan email Anda. Pengaturan WebP ini akan aktif secara default, jadi pengguna tidak perlu mengaktifkan secara manual.
Sedangkan untuk konfigurasi lainnya, misalnya pengaturan level kompresi, Anda bisa masuk ke pengaturan Media >> Optimole >> Settings dan mengaturnya sesuai kebutuhan.
Optimal dapat digunakan gratis secara terbatas untuk 5000 pengunjung per bulan. Selanjutnya, Anda bisa upgrade ke paket berbayar mulai dari $19 per bulan untuk 25.000 pengunjung.
Kesimpulan
Ada banyak cara yang bisa Anda lakukan untuk optimasi situs WordPress Anda agar berkinerja optimal. Salah satunya adalah optimasi gambar karena file ini mempunyai ukuran yang cenderung besar dari rata- rata ukuran file halaman.
Dengan melakukan optimasi gambar, Anda dapat mengurangi ukuran gambar, menghemat bandwidth dan pada akhirnya mempercepat loading website. Mengubah gambar menjadi WebP di website WordPress adalah salah satu metode yang bisa Anda tempuh untuk optimasi gambar ini.
WebP merupakan format gambar generasi terbaru yang menawarkan ukuran 25-34% lebih kecil dari format gambar JPEG & PNG melalui metode kompresinya. Dengan perbandingan ini, ada banyak webmaster yang mulai menggunakan gambar WebP di website mereka.
Secara default WordPress memang belum mendukung format gambar WebP. Kendati begitu, ada trik yang bisa Anda gunakan untuk mengunggah file gambar dengan format WebP melalui penambahan kode di functions.php. Atau bisa juga dengan mengubah gambar WebP secara otomatis di WordPress dengan bantuan beberapa plugin di atas.
Dengan deretan cara di atas, kini Anda bisa menggunakan gambar WebP di situs WordPress dengan mudah dan nyaman. Metode mana yang Anda pilih?
