Pada blog non AMP, untuk menggunakan gambar webp kita bisa menggunakan kode html
<picture> dengan rscset.Sementara untuk merubah gambar jpeg atau png menjadi webp untuk gambar yang diupload di Blogger, kita tinggal menambahkan kode
-rw pada URL gambar Blogger pada bagian size /s..../ (contoh: /s1600/ menjadi /s1600-rw/), seperti berikut ini.Agar gambarnya menjadi responsive pastikan pada template sudah ada CSS berikut ini letakkan Di atas ]]></b:skin>
.post-body img {width:100%;height:100%;display: block;}
atau dengan kode berikut ini
.post-body img {width:auto;max-width:100%;height:auto;overflow:hidden}
Contoh Berikut adalah URL aslinya:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRKbXKMNP8PKdXJ9agg3NRR8QwXg0UjhAfRzB7HmmR7wP4lBMv4dBvLAnI72gCaBVsoi3I2VHWZWOtYtzyC4XiQrn_HvkIs_cyH5ByoVjGH4TZz0heavozx39uckQwmO6g0gwpToq-JY/s1600/blogger-images2.png
Dan berikut adalah image Blogger diubah menjadi webp:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRKbXKMNP8PKdXJ9agg3NRR8QwXg0UjhAfRzB7HmmR7wP4lBMv4dBvLAnI72gCaBVsoi3I2VHWZWOtYtzyC4XiQrn_HvkIs_cyH5ByoVjGH4TZz0heavozx39uckQwmO6g0gwpToq-JY/-rw/blogger-images2.png
Dan untuk menampilkannya di postingan blogger, silahkan gunakan kode seperti di bawah ini.
<picture>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRKbXKMNP8PKdXJ9agg3NRR8QwXg0UjhAfRzB7HmmR7wP4lBMv4dBvLAnI72gCaBVsoi3I2VHWZWOtYtzyC4XiQrn_HvkIs_cyH5ByoVjGH4TZz0heavozx39uckQwmO6g0gwpToq-JY/-rw/blogger-images2.png" type="image/webp"/>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRKbXKMNP8PKdXJ9agg3NRR8QwXg0UjhAfRzB7HmmR7wP4lBMv4dBvLAnI72gCaBVsoi3I2VHWZWOtYtzyC4XiQrn_HvkIs_cyH5ByoVjGH4TZz0heavozx39uckQwmO6g0gwpToq-JY/s1600/blogger-images2.png" type="image/png"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRKbXKMNP8PKdXJ9agg3NRR8QwXg0UjhAfRzB7HmmR7wP4lBMv4dBvLAnI72gCaBVsoi3I2VHWZWOtYtzyC4XiQrn_HvkIs_cyH5ByoVjGH4TZz0heavozx39uckQwmO6g0gwpToq-JY/s1600/blogger-images2.png" alt="Alt Text!" width="1000" height="600"/>
</picture>type="image/png" silahkan sesuaikan dengan format imagenya. Jika format imagenya *.jpeg maka menjadi type="image/jpeg".Kode
<img> di atas sebagai backup untuk browser yang tidak mendukung <picture>.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. Tetapi jika Anda menggunakan Firefox maka akan disimpan sebagai file *.png sesuai dengan file aslinya.
Selamat mencoba dan semoga bermanfaat.