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 menyerupai gambar aslinya. Meskipun image dengan format webp ini belum banyak didukung oleh platform blogging menyerupai Blogger ini dan belum support semua browser tetapi kita tetap sanggup menggunakannya, setidaknya sanggup mengurangi loading pada browser yang sudah support webp menyerupai 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 menyerupai format jpg, png, dan lainnya.

Berikut isyarat 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 menyerupai 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/AVvXsEjCqTCQdtEffv7Je1j92qhLDWo0w-bRK7mMq7pjdoav7NjBrtcvpCr-KLlADQVfbB-FiNulgfD-sED_yZkHSx7EzP_XcV4JqB3QWx00DtoY3qsc4XAwkJSoD43mDj0hzEDZMkIINosjN4E/s1600/google-amp.jpg" title="Penggunaan Image Dengan Format WebP Pada Blog AMP" layout="responsive"></amp-img>
 </amp-img>

Berikut ialah perbandingan ukuran gambar di atas.


Gambar di atas juga mengggunakan format webp. Untuk menandakan bahwa postingan ini memakai webp, jikalau 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.


Sumber https://www.kompiajaib.com/

Share this post