Penggunaan Gambar WebP Pada Postingan Blogger Non AMP HTML

Dan meskipun kini Blogger belum support untuk upload image webp, tetapi kita bisa mendapatkan dengan mudah gambar webp dari gambar Blogger seperti yang sebelumnya kita bahas pada postingan tentang cara mengkonversi gambar Blogger menjadi WebP untuk amp-img.

Dan cara ini juga bisa digunakan pada blog non AMP, namun tentunya kode html yang digunakan berbeda.

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.

Berikut adalah URL aslinya:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/s1600/blogger-images2.png

Dan berikut adalah image Blogger diubah menjadi webp:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/-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/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/-rw/blogger-images2.png" type="image/webp">

  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/s1600/blogger-images2.png" type="image/png">

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8AoH3AO1PwQZ3spUHvhoKW9x4l_gRTh2mXHHZoW7zjb6EwjY9kqZdFG-n-MfZbtrhv_hAkMW-RWAEGxtevtOl9ThyphenhyphenGwB4DyJUIFyg8cMKpCxydz-8Xt11iergshfH8G8tGeX782ue8I/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>.

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

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

Untuk demonya saya buat pada JSFiddle berikut ini.

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.