Penggunaan Image Dengan Format Webp Pada Blog Amp

Webp merupakan format gambar yang sanggup mempunyai ukuran yang lebih kecil dibanding dengan format aslinya namun tetap mempunyai kualitas ibarat gambar aslinya. Meskipun image dengan format webp ini belum banyak didukung oleh platform blogging ibarat Blogger ini dan belum support semua browser tetapi kita tetap sanggup menggunakannya, setidaknya sanggup mengurangi loading pada browser yang sudah support webp ibarat Google Chrome dan Opera.

Lalu bagaimana cara menampilkan image pada browser yang belum support image dengan format webp?

Khususnya untuk AMP HTML, kita sanggup memakai fallback pada amp-img dengan memakai format image yang didukung browser lain ibarat format jpg, png, dan lainnya.

Berikut arahan untuk menampikan webp dengan fallback pada amp-img sehingga sanggup tetap menampilkan image pada semua browser.

 <amp-img alt="Penggunaan Image Dengan Format WebP Pada Blog AMP Penggunaan Image Dengan Format WebP Pada Blog AMP"
   width="550"
   height="368"
   src="images/mountains.webp">
   <amp-img alt="Penggunaan Image Dengan Format WebP Pada Blog AMP Penggunaan Image Dengan Format WebP Pada Blog AMP"
     fallback
     width="550"
     height="368"
     src="images/mountains.jpg"></amp-img>
 </amp-img>

Sebagai contoh, gambar berikut ini memakai webp.


Kode image di atas ibarat berikut ini.

 <amp-img alt="Penggunaan Image Dengan Format WebP Pada Blog AMP Penggunaan Image Dengan Format WebP Pada Blog AMP" height="599" width="1000" src="https://cdn.rawgit.com/KompiAjaib/webp/7d0f88c4/google-amp.webp" title="Penggunaan Image Dengan Format WebP Pada Blog AMP" layout="responsive">
 <amp-img fallback="" alt="Penggunaan Image Dengan Format WebP Pada Blog AMP Penggunaan Image Dengan Format WebP Pada Blog AMP" height="599" width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc85nCLd2BKoH0caMZTW6DOYVqiFoxJ04w_s9_rU9rsqR3fLhOT7EubHxYy0iyk_ynwGgcNAHNyCjxtIeCvVlQY70HE86MfYFFC_LIGQGiQ_RAKsisFDTzXan1nkzeZRo7xuM4gEu2ins/s1600/google-amp.jpg" title="Penggunaan Image Dengan Format WebP Pada Blog AMP" layout="responsive"></amp-img>
 </amp-img>

Berikut yaitu perbandingan ukuran gambar di atas.


Gambar di atas juga mengggunakan format webp. Untuk mengambarkan bahwa postingan ini memakai webp, kalau Anda memakai Google Chrome silahkan klik kanan pada gambar kemudian Save image as... Nanti akan disimpan sebagai file webp. Anda juga sanggup 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 sanggup upload image webp di Blogger. Untuk upload image webp, kita sanggup memakai Github atau Firebase atau sanggup memakai Google Photos.

Image webp ini sanggup kita gunakan untuk menampilkan gambar di dalam postingan atau untuk banner iklan dan lainnya. Untuk mendapat format webp, kita sanggup memakai image to webp online converter.

Semoga bermanfaat.

Share this post