Merubah Format Gambar ke WebP Secara CLI

Halo, sudah 4 bulan ternyata tidak menulis disini. Belum ketemu bahan apa yang pas ditulis, akhirnya minggu-minggu ini coba bermain proyek kecil-kecilan membuat website dengan JAMSTACK. Dan tentu saja menggunakan Blogdown, bisa membaca tulisan saya tentang  Membangun Website Sederhana Dengan Blogdown Static Site Generator. Pada postingan sebelumnya, saya juga pernah menulis tentang Aplikasi Optimasi Gambar di Linux Secara CLI. Merubah Format Gambar ke WebP Secara CLI masih salah satu cara melakukan optimasi file gambar terutama  para developer website. Optimasi gambar pada website sangat berpengaruh terhadap kecepatan website dan kualitas dari gambar yang ingin ditampilkan. Studi kasus ini bermula, blog yang sedang saya bangun dan audit performa terdapat pesan seperti ini:

Terdapat penjelasan bahwa file logo yang saya pakai disarankan untuk menggunakan format next-gen, seperti JPEG 2000, JPEG XR dan WEBP. Saya sendiri sebenarnya lebih suka PNG karena optimasi mudah karena terbiasa pakai OptiPNG untuk kompresi secara mudah. Tetapi dari ketiga format next-gen tersebut, yang sering saya dengar cukup lama adalah WebP terutama di komunitas JAMSTACK Indonesia dan Gohugo Indonesia. Dari hasil audit tersebut saya mulai sedikit kepo tentang WebP ini.

Apa WebP itu?

Menurut Wikipedia, WEBP ini merupakan format gambar yang dipublikasikan tahun 2010 dan mencapai versi 1.0 pada April 2018. Pada Mei 2021 ini, WEBP sudah mulai banyak didukung oleh 94% browser web diseluruh dunia. Kenapa WebP menjadi salah satu tren dalam format gambar? hal ini tidak terlepas dari penggunaan kompresi lossy dan lossless dan mendukung animasi dan transparansi alfa. WebP ini dikembangkan oleh Google dengan tujuan membuat sebuah file gambar dengan ukuran lebih kecil untuk kualitas yang sama atau kualitas yang lebih tinggi untuk ukuran yang sama, daripada format gambar pada umumnya seperti JPEG, PNG dan GIF.

Merubah Format Gambar ke WEBP Secara CLI

Untuk merubah format gambar ke WEBP secara CLI, Anda butuh aplikasi yang bernama libwebp. Selanjutnya cek terlebih dahulu apakah sudah terpasang atau belum pada sistem operasi kalian, hal ini di Manjaro saya, libwebp ini sudah terpasang dan ingat saya belum pernah saya pasang sendiri. Jadi, coba jalankan baris perintah:

cwebp -H

Perintah diatas digunakan untuk membaca cara menggunakan cwebp, bila ada output penjelasan cara penggunaannya berarti sudah terpasang. Bila  belum jalankan baris perintah berikut:

#Distribusi ArchLinux
pamac install libwebp

# Distribusi Debian

apt-get install -y libwebp-dev

Dengan menggunakan libwebp ini kita dapat melakukan beberapa hal:

• Melakukan encoder file WebP dengan perintah cwebp
• Melakukan decoder file WebP dengan perintah dwebp
• Membuka file Webp dengan perintah vwebp
• Melakukan muxing pada WebP
• Melakukan konvert GIF ke WebP

Pada tulisan ini, saya mencoba untuk melakukan encoder atau konvert gambar ke format webp dalam hal ini menggunakan JPEG. Maka saya menjalankan perintah:

cwebp namafile.jpeg -o namafile.webp

Dalam melakukan konversi, libwebp menggunakan kualitas standarnya yaitu 75. Anda bisa merubahnya sesuka hati dengan menambahkan parameter -q. Seperti berikut:

cwebp -q 85 namafile.png -o namafile.webp

Berikut hasil perbandingan yang saya coba:

File asli:

Proses konversi standar:

File webp dengan konversi standar:

Proses konversi kualitas 80:

File webp dengan konversi kualitas 80:

Dari hasil screenshoot tersebut, pengurangan ukuran gambar juga cukup bagus. Dari file awal berukuran 74.2 KiB berubah menjadi 25.4 KiB dan 28.2 KiB. Untuk kualiatas gambar menurut saya hampir sama, Anda bisa mencoba sendirinya agar lebih tahu. Memang sengaja saya tidak tampilkan perbandingan hasilnya. Apakah semua website bisa memakai WebP? Jawabannya adalah bisa, tetapi yang pernah saya baca hanya 2 saja WordPress dan JAMSTACK terutama Hugo. Tetapi dalam postingan ini saya sendiri tidak menggunakan WebP, karena harus mengulik plugin yang cocok dan ya masih bemain dengan Blogdown. Selamat mencoba menggunakan WebP dan websitenya semakin ngebut, terima kasih.

Referensi tulisan:

• WebP Official Website
• Wikipedia WebP
• Light House