Ditulis oleh: Ditulis pada: 4/21/2018
Image merupakan salah satu unsur yang penting dari suatu halaman web. Dengan image maka bisa menjelaskan sesuatu secara visual kepada pengunjung, dengan begitu maka pengunjung akan lebih jelas. Namun dalam penggunaannya, kita harus hati-hati terutama dengan ukuran image-nya, karena image ini mempengaruhi loading web/blog. Image yang ditampilkan terlebih dahulu harus didownload dari sumbernya oleh browser.Nah jika ukurannya terlalu besar dan berat untuk didownload, maka itu akan mempengaruhi loading blog sehingga blog yang bersangkutan akan berat juga loading-nya. Untuk itu kita harus membuat image untuk blog ini dengan ukuran sekecil mungkin namun harus tetap memiliki kualitas yang baik sehingga tetap nyaman dan enak untuk dilihat.
Salah satu cara membuat image dengan ukuran kecil namun kualitasnya tetap baik yaitu dengan menggunakan image dengan format webp. Namun sayang untuk format webp ini belum banyak didukung oleh platform blogging dan browser. Browser yang mendukung image dengan format webp ini yaitu Google Chrome dan Opera.
Webp merupakan format gambar yang bisa memiliki ukuran yang lebih kecil dibanding dengan format aslinya namun tetap memiliki kualitas seperti gambar aslinya. Meskipun image dengan format webp ini belum banyak didukung oleh platform blogging seperti Blogger ini dan belum support semua browser tetapi kita tetap bisa menggunakannya, setidaknya dapat mengurangi loading pada browser yang sudah support webp seperti Google Chrome dan Opera.
Lalu bagaimana cara menampilkan image pada browser yang belum support image dengan format webp?
Khususnya untuk AMP HTML, kita bisa menggunakan
fallback pada amp-img dengan menggunakan format image yang didukung browser lain seperti format jpg, png, dan lainnya.Berikut kode untuk menampikan webp dengan
fallback pada amp-img sehingga bisa tetap menampilkan image pada semua browser.
<amp-img alt="Mountains"
width="550"
height="368"
src="images/mountains.webp">
<amp-img alt="Mountains"
fallback
width="550"
height="368"
src="images/mountains.jpg"></amp-img>
</amp-img>
Sebagai contoh, gambar berikut ini menggunakan webp.
Kode image di atas seperti berikut ini.
<amp-img alt="Contoh webp" height="599" width="1000" src="https://cdn.rawgit.com/KompiAjaib/webp/7d0f88c4/google-amp.webp" title="Contoh webp" layout="responsive">
<amp-img fallback="" alt="Contoh webp" height="599" width="1000" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisigvd_Z6dXvsb-rZ_-8t18CQN8mVuxTYY-a7axM0ZjDvSBi7OORI5E-vpf0xlgX-04n1RbotbZ2p8Wl8OfctI-5BP2q5tYDvkQPMgqjZ7PSsZgNVeWJOWsNUJ01temNw4VgOESrMbu1Q/s1600/google-amp.jpg" title="Contoh webp" layout="responsive"></amp-img>
</amp-img>
Berikut adalah perbandingan ukuran gambar di atas.
Gambar di atas juga mengggunakan format webp. Untuk membuktikan bahwa postingan ini menggunakan webp, jika Anda menggunakan Google Chrome silahkan klik kanan pada gambar lalu Save image as... Nanti akan disimpan sebagai file webp. Anda juga bisa test halaman ini di page speed insight, tidak ada notif Optimize Images dari gambar postingan, kecuali dari gambar-gambar iklan Adsense.
Saat ini Blogger belum mendukung webp, jadi kita tidak bisa upload image webp di Blogger. Untuk upload image webp, kita bisa menggunakan Github atau Firebase atau bisa menggunakan Google Photos.
Image webp ini bisa kita gunakan untuk menampilkan gambar di dalam postingan atau untuk banner iklan dan lainnya. Untuk mendapatkan format webp, kita bisa menggunakan image to webp online converter.
Semoga bermanfaat.