webp-bg-img

Jika kamu lihat hasil tes di PageSpeed Insights pasti seringkali melihat yang namanya “serve images in next-gen formats”.

WebP-error

Apa sih itu?

Ya, yang dimaksud adalah jenis format gambar yang baru, dan WebP salah satunya.

Namun menyajikan WebP tidaklah mudah, tergantung pada server, CDN, theme, cache dan lain sebagainya.

Artikel ini akan mengupas cara menyajikan WebP di WordPress kamu lebih lanjut.

Apa itu WebP?

Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them.

WebP adalah format gambar yang dikembangkan oleh Google di tahun 2010, dan telah meluas secara pesat dalam dunia web development hingga hari ini.

Dengan kualitas yang serupa, ukuran file WebP jauh lebih kecil dibandingkan format gambar lainnya. Bisa berkurang 30% sampai 80%!.

Jadi, tentu saja menyajikan gambar dalam format WebP akan sangat baik untuk performa website, lebih cepat loading dan lebih sedikit memakan bandwidth.

Mengapa jangan WebP saja?

Namun seperti saya sebut di awal tadi, menyajikan WebP tidak semudah itu. Karena hingga saat ini belum seluruh browser support untuk WebP. Berikut screenshot dari caniuse.com:

webp-supports

Meskipun sudah 96%, namun saya rasa sebagian besar pengguna Apple di Indonesia masih menggunakan versi Safari yang belum support tersebut.

Karena itulah, kita belum bisa menggunakan WebP sepenuhnya.

Cara menyajikan WebP

Jadi disini hal yang perlu kita capai adalah menyajikan WebP di browser yang memang support, namun jika tidak, maka gambar original lah yang harus disajikan (jpg/png/gif).

Secara garis besar, ada 2 pilihan untuk mencapai hal tersebut:

1. Memakai tag picture

Kita bisa pakai tag picture untuk beritahu browser. Jika support, browser akan mengambil gambar WebP, jika tidak maka gambar yang lain lah yang diambil.

<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<img src="img.jpg">
</picture>

2. Dengan varied response

Dalam varied response, tag akan berbentuk seperti biasanya:

<img src="img.jpg" />

Satu baris URL image ini sebenarnya sudah mampu untuk menyajikan WebP maupun jpg. Namun hal ini akan sangat bergantung kepada servermu.

Meski ekstensinya ‘.jpg’, jika browsernya dianggap support maka responnya adalah WebP. Inilah yang dimaksud dengan ‘varied response’.

Perbandingan keduanya

Masing-masing memiliki kelebihan dan kekurangannya. Berikut tabel perbandingannya:

pictag-vs-vr

Menyajikan WebP di WordPress

Cara termudah adalah dengan menggunakan bantuan CDN yang memiliki fitur tersebut. Namun jika kamu tidak memakai CDN, maka bisa gunakan plugin WebP Express. Plugin ini memiliki fitur untuk memilih antara 2 metode yang kita bahas di atas tadi. 

webpx-settings

Cukup install dan klik ‘Save settings and force new .htaccess rules’.

Penutup

Semoga nanti akan ada saatnya dimana semua browser sudah support WebP. Namun hingga saat itu tiba, kita harus sedikit lebih usaha untuk bisa menyajikan WebP di WordPress.