Penggunaan Gambar Webp Pada Postingan Blogger Non Amp Html

Dan meskipun sekarang Blogger belum support untuk upload image webp, tetapi kita dapat mendapat dengan gampang gambar webp dari gambar Blogger menyerupai yang sebelumnya kita bahas pada postingan perihal cara mengkonversi gambar Blogger menjadi WebP untuk amp-img.

Dan cara ini juga dapat dipakai pada blog non AMP, namun tentunya isyarat html yang dipakai berbeda.

Pada blog non AMP, untuk memakai gambar webp kita dapat memakai isyarat html <picture> dengan rscset. Sementara untuk merubah gambar jpeg atau png menjadi webp untuk gambar yang diupload di Blogger, kita tinggal menambahkan isyarat -rw pada URL gambar Blogger pada bab size /s..../ (contoh: /s1600/ menjadi /s1600-rw/), menyerupai berikut ini.

Berikut yaitu URL aslinya:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHJBg5tCmHJcfOfLNZwbVGINvWCmscrSKgZyraQQ023RR28LhRJITszJsLnzEEW-j35EtNLiofuIevg8YGHQ4CRtESTDtsNSQlHkk4oVXF6fCq3OOATeIvpB_l2fZU9P6p3EXt3DHMT3o/s1600/blogger-images2.png

Dan berikut yaitu image Blogger diubah menjadi webp:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHJBg5tCmHJcfOfLNZwbVGINvWCmscrSKgZyraQQ023RR28LhRJITszJsLnzEEW-j35EtNLiofuIevg8YGHQ4CRtESTDtsNSQlHkk4oVXF6fCq3OOATeIvpB_l2fZU9P6p3EXt3DHMT3o/-rw/blogger-images2.png

Dan untuk menampilkannya di postingan blogger, silahkan gunakan isyarat menyerupai di bawah ini.

 <picture>
   <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHJBg5tCmHJcfOfLNZwbVGINvWCmscrSKgZyraQQ023RR28LhRJITszJsLnzEEW-j35EtNLiofuIevg8YGHQ4CRtESTDtsNSQlHkk4oVXF6fCq3OOATeIvpB_l2fZU9P6p3EXt3DHMT3o/-rw/blogger-images2.png" type="image/webp"/>
   <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHJBg5tCmHJcfOfLNZwbVGINvWCmscrSKgZyraQQ023RR28LhRJITszJsLnzEEW-j35EtNLiofuIevg8YGHQ4CRtESTDtsNSQlHkk4oVXF6fCq3OOATeIvpB_l2fZU9P6p3EXt3DHMT3o/s1600/blogger-images2.png" type="image/png"/>
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHJBg5tCmHJcfOfLNZwbVGINvWCmscrSKgZyraQQ023RR28LhRJITszJsLnzEEW-j35EtNLiofuIevg8YGHQ4CRtESTDtsNSQlHkk4oVXF6fCq3OOATeIvpB_l2fZU9P6p3EXt3DHMT3o/s1600/blogger-images2.png" alt="Penggunaan Gambar WebP Pada Postingan Blogger Non AMP HTML Penggunaan Gambar WebP Pada Postingan Blogger Non AMP HTML" 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>.

Dan pastikan pada template sudah ada CSS berikut ini semoga gambarnya menjadi responsive.

 .post-body img{width:auto;max-width:100%;height:auto}

Untuk demonya aku buat pada JSFiddle berikut ini.

Jika Anda memakai Google Chrome, silahkan klik kanan pada gambar di atas kemudian Save image as... maka akan disimpan sebagai gambar dengan format file *.webp. Tetapi jikalau Anda memakai Firefox maka akan disimpan sebagai file *.png sesuai dengan file aslinya.

Selamat mencoba dan semoga bermanfaat.

Share this post