Penggunaan image berekstensi Webp sekarang ini menjadi alternatif yang jitu untuk meningkatkan kecepatan loading blog yang memiliki banyak gambar. Untuk yang belum mengetahui apa itu webp, berikut ini saya beri sedikit gambarannya. seperti yang saya kutip dari dari situs developers.google.com dengan judul A new Image format for the Web, bahwa WebP adalah format gambar modern yang memberikan kompresi lossless dan lossy unggul untuk gambar di web.
Menggunakan webp membuat web lebih cepat, karena webp berukuran sekitar 26% -34% lebih kecil dari PNG atau JPEG dengan kualitas yang masih sama.
Baca juga : Apakah Blog AMP Lebih SEO?
Namun, meskipun format webp ini format modern, ternyata masih banyak peramban browser yang belum mendukung atau suport. Oleh karena itu dibutuhkan sebuah cara agar gambar yang ingin kita tampilkan tetap muncul pada semua jenis web browser. Khusus untuk blog AMP, jika resource yang diminta oleh komponen amp-img gagal dimuat, maka gambar tidak akan muncul alias akan terlihat kosong. Untuk mengatasinya bisa dengan cara menggunakan fallback
Cara Menampilkan Gambar pada Blog AMP
Sebelum kita menerapkan fallback, ada baiknya kita lihat kembali bagaimana cara menampilkan gambar pada blog amp agar terlihat responsive.
<amp-img alt="cara menampilkan gambar di blog amp agar responsiv" src="" width="900" height="675" layout="responsive"> </amp-img>
Seperti yang saya sebutkan di atas, jika gagal di muat, maka pada tampilan di atas akan terlihat kosong dan gambar tidak akan muncul. karena saya menggunakan gambar dengan format webp.
Alternatif : Menggunakan Fallback
Dengan elemen fallback pada amp-img, kalaupun nanti ada yang liat postingan melalui browser yang tidak suport webp maka sebagai gantinya gambar jpg lah yang akan ditampilkan.<amp-img alt="Menggunakan Fallback pada AMP untuk Browser yang tidak Suport Webp"
width="550"
height="368"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHmzquuGyXTnG-yAOOSb8RA5k-IXCu9hvzM1-NRq0KY09piqrLQ41mHpBWJD_X0UephyphenhyphenElLdqRrmypLliG6hjPMeGl0k03jrBaTqC45CX0uGsXiprE_5-OipSCFiNEZpfXw0o_Fk1je8G/s1600/sea.webp">
<amp-img alt="menggunakan Fallback pada AMP untuk Browser yang tidak Suport Webp"
fallback
width="550"
height="368"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheC3nc-NWS3yLKWJeatnH6Q4Vb32ppgQxqvJHMtG3NDtEvc_GfH7hV1ffoznRs-ihUeD6xnpSU90zadhv22HUk4a91o2-xhbgWMAhmmndf10vJqpzLsAXabT0uDyP-HtFuS7KM1aujWJz6/s1600/sea.jpg"></amp-img>
</amp-img>
Dengan menggunakan fallback, maka kita tidak perlu khawatir lagi kalau gambar yang kita tampilkan tidak muncul. Semoga penjelasan di atas mudah dipahami. Jika ada kritik dan saran, silahkan saja sampaikan pada kolom komentar yang tersedia.