Ditulis oleh: Ditulis pada: 4/22/2018
Saat ini Blogger belum support upload gambar dengan format webp, padahal Google sendiri menganjurkan untuk menggunakan gambar dengan format webp. Kebetulan pada AMP HTML, untuk penggunaan gambar format webp lebih mudah karena bisa menggunakan gambar fallback untuk browser-browser yang belum support webp.Namun seperti halnya pada Google Photos, kita bisa meng-hack gambar yang diupload di Blogger menjadi webp dengan mudah.Tentunya ini menjadi solusi yang baik untuk menampilkan gambar dengan webp pada postingan-postingan AMP.
Dengan begitu kita bisa meningkatkan loading halaman postingan, setidaknya loading halaman pada browser-browser yang sudah mendukung webp seperti Google Chrome dan Opera. Namun tetap dapat menampilkan gambar pada browser-browser yang belum support webp.
Sebenarnya sebelumnya saya tidak kepikiran bahwa gambar Blogger juga bisa dihack menjadi webp seperti pada gambar Google Photos. Namun ternyata trik merubah gambar Google Photos menjadi webp bisa juga diterapkan pada gambar Blogger.
Tentunya hal ini menjadi solusi yang paling mudah untuk menggunakan gambar webp pada postingan-postingan blog AMP sehingga halamannya menjadi lebih ringan (setidaknya pada browser Google Chrome dan Opera).
Cara merubah gambar Blogger menjadi webp ini cukup mudah seperti halnya pada Google Photos. Kita tinggal menambahkan kode
-rw pada URL gambar Blogger pada bagian size /s..../ (contoh: /s1600/).Sebagai contoh, merubah gambar Blogger menjadi webp tampak seperti pada contoh URL image Blogger berikut ini.
Berikut adalah URL aslinya:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw4hPy5R4VP5IlhwX_bjXN62BGUtnc_iKJU2DtsrG69c44Co9RBnZNqArIL3aVKVedQFbFGuoUf765QlN0xRofs6H-W5ElO27l87Fd_bHZqUfuU9ldJCJF_EP498w4ImkL27CFvB1Xu8I/s1600/blogger-images.png
Dan berikut adalah image Blogger diubah menjadi webp:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw4hPy5R4VP5IlhwX_bjXN62BGUtnc_iKJU2DtsrG69c44Co9RBnZNqArIL3aVKVedQFbFGuoUf765QlN0xRofs6H-W5ElO27l87Fd_bHZqUfuU9ldJCJF_EP498w4ImkL27CFvB1Xu8I/-rw/blogger-images.png
Sehingga ketika digunakan pada amp-image dengan fallback untuk menampilkan gambar webp akan tampak seperti berikut ini.
<amp-img alt="Contoh gambar blogger menjadi webp"
width="1000"
height="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw4hPy5R4VP5IlhwX_bjXN62BGUtnc_iKJU2DtsrG69c44Co9RBnZNqArIL3aVKVedQFbFGuoUf765QlN0xRofs6H-W5ElO27l87Fd_bHZqUfuU9ldJCJF_EP498w4ImkL27CFvB1Xu8I/-rw/blogger-images.png"
title="Contoh gambar blogger menjadi webp"
layout="responsive">
<amp-img alt="Contoh gambar blogger menjadi webp"
fallback
width="1000"
height="600"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw4hPy5R4VP5IlhwX_bjXN62BGUtnc_iKJU2DtsrG69c44Co9RBnZNqArIL3aVKVedQFbFGuoUf765QlN0xRofs6H-W5ElO27l87Fd_bHZqUfuU9ldJCJF_EP498w4ImkL27CFvB1Xu8I/s1600/blogger-images.png"
title="Contoh gambar blogger menjadi webp"
layout="responsive"></amp-img>
</amp-img>
Dan penampakannya akan seperti gambar di bawah ini.
Catatan: ini tidak berlaku untuk gambar dengan format *.gif.
Jika Anda menggunakan Google Chrome, silahkan klik kanan pada gambar di atas lalu Save image as... maka akan disimpan sebagai gambar dengan format file *.webp
Bagaimana, mudah bukan? Selamat mencoba dan semoga bermanfaat.