Ditulis oleh: Ditulis pada: 4/22/2018
WebP adalah format gambar modern yang dikembangkan oleh Google yang menyediakan kompresi lossless dan lossy superior untuk gambar di web. Dengan menggunakan gambar WebP, maka webmaster dan pengembang web dapat menampilkan gambar yang lebih kecil sehingga lebih cepat dimuat yang selanjutnya akan membuat loading web menjadi lebih cepat.Gambar lossless WebP berukuran 26% lebih kecil dibandingkan dengan gambar aslinya yang berformat PNG. Gambar loss WebP adalah 25-34% lebih kecil dari gambar aslinya yang berformat JPEG dengan kualitas yang tetap sama dengan gambar aslinya.
Namun sayang, saat ini belum semua browser yang mendukung gambar dengan format webp, hanya Google Chrome dan Opera yang kini sudah mendukung webp. Namun sepertinya di masa yang akan datang, browser lainnya seperti Firefox akan mendukung image dengan format webp.
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/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/s1600/blogger-images2.png
Dan berikut adalah image Blogger diubah menjadi webp:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/-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/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/-rw/blogger-images2.png" type="image/webp"/>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/s1600/blogger-images2.png" type="image/png"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXkXS41xxHeQrbp6kJrq1Vh0wuZXTpxi2KKNiRqpD8_yN2Cdp5doxuxv_oU0DT3Ke_ez36LWkb_7FrYyARISmAKM8sjGfDD9hWrJ-72CB9FQ85WiYT-TdVZF9cflV7Lf375AAug0pkxU/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.