Webp merupakan format gambar yang bisa memiliki ukuran yang lebih kecil dibanding dengan format aslinya namun tetap memiliki kualitas seperti gambar aslinya. Meskipun image dengan format webp ini belum banyak didukung oleh platform blogging seperti Blogger ini dan belum support semua browser tetapi kita tetap bisa menggunakannya, setidaknya dapat mengurangi loading pada browser yang sudah support webp seperti Google Chrome dan Opera.Lalu bagaimana cara menampilkan image pada browser yang belum support image dengan format webp?
Khususnya untuk AMP HTML, kita bisa menggunakan
fallback pada amp-img dengan menggunakan format image yang didukung browser lain seperti format jpg, png, dan lainnya.Berikut kode untuk menampikan webp dengan
fallback pada amp-img sehingga bisa tetap menampilkan image pada semua browser.
<amp-img alt="Mountains"
width="550"
height="368"
src="images/mountains.webp">
<amp-img alt="Mountains"
fallback
width="550"
height="368"
src="images/mountains.jpg"></amp-img>
</amp-img>Sebagai contoh, gambar berikut ini menggunakan webp.
Kode image di atas seperti berikut ini.
<amp-img alt="Contoh webp" height="599" width="1000" src="https://cdn.rawgit.com/KompiAjaib/webp/7d0f88c4/google-amp.webp" title="Contoh webp" layout="responsive">
<amp-img fallback="" alt="Contoh webp" height="599" width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYdboptMM9zuMu5kANSMqqjMat8hyVKWverX-1DZ4iLr_G4SgX6dHAFt4-SuuCmV1AADPB9pt7eeF1iucWxYBDSP6XynWqko59HaH_OBg1MZHPx0vozvSPOVLmhXUTKHIrNToeOKSzYE/s1600/google-amp.jpg" title="Contoh webp" layout="responsive"></amp-img>
</amp-img>Berikut adalah perbandingan ukuran gambar di atas.
Gambar di atas juga mengggunakan format webp. Untuk membuktikan bahwa postingan ini menggunakan webp, jika Anda menggunakan Google Chrome silahkan klik kanan pada gambar lalu Save image as... Nanti akan disimpan sebagai file webp. Anda juga bisa test halaman ini di page speed insight, tidak ada notif Optimize Images dari gambar postingan, kecuali dari gambar-gambar iklan Adsense.
Saat ini Blogger belum mendukung webp, jadi kita tidak bisa upload image webp di Blogger. Untuk upload image webp, kita bisa menggunakan Github atau Firebase atau bisa menggunakan Google Photos.
Image webp ini bisa kita gunakan untuk menampilkan gambar di dalam postingan atau untuk banner iklan dan lainnya. Untuk mendapatkan format webp, kita bisa menggunakan image to webp online converter.
Semoga bermanfaat.