10 Alasan Mengapa Kita Perlu Menggunakan Format WebP untuk Image di Blog

WebP adalah format gambar generasi terbaru yang dikembangkan oleh Google. Format ini dirancang khusus untuk digunakan di web dengan fokus pada kualitas gambar yang tinggi dan ukuran file yang lebih kecil. WebP adalah format gambar yang bersifat open source, artinya dapat digunakan oleh siapa saja tanpa biaya lisensi, dan format ini telah mendapatkan dukungan luas di berbagai browser dan perangkat lunak.

Sejak dirilis pada September 2010 dan digunakan oleh Chrome, Google “memaksa” seluruh website untuk menggunakan format ini. Langkah Chrome kemudian diikuti oleh browser-browser lain , sehingga format image ini didukung oleh 96.3% browser yang ada di dunia.

---

Kelebihan Format WebP Dibandingkan JPG, PNG, dan Format Lainnya

Sebagai bloger, image adalah salah satu elemen utama dalam blog kita sekaligus elemen yang paling banyak memakan sumber daya. Chrome dan browser-browser lain menyarankan agar blog kita menggunakan format WebP bukannya tanpa alasan.

Ada beberapa keuntungan yang bisa kita dapat dengan menggunakan format WebP untuk image blog.

1. Ukuran file lebih kecil

   Jika dibandingkan dengan JPG atau PNG, file size image dengan format WebP jauh lebih kecil. Tergantung jenis gambar, persentasenya bisa 90%, 100%, bahkan 200% lebih kecil.

   Sebagai gambaran, di bawah ini adalah image yang sama dengan resolusi 1200 x 675 px. Kiri image dengan format PNG, ukurannya 839 KB, file size yang cukup lalawora untuk sebuah image. Kanan, image dengan format WebP dan ukurannya hanya 27 KB atau 97% lebih kecil.

   

   Tetapi, Anda tak perlu khawatir dengan kualitas gambarnya. Meskipun ukurannya menjadi lebih kecil, image tidak akan ngeblur.

2. Lebih mudah di-render oleh browser

   Setiap kali blog kita dibuka, browser akan mengirimkan HTTP ke server untuk mendapatkan semua data yang dibutuhkan seperti gambar, font, CSS, dan sebagainya. Image adalah salah satu sumber daya yang cukup memengaruhi proses pertukaran data dari dan ke server.

   Karena hari ini semua browser telah mendukung format WebP secara default, tidak diperlukan perangkat lunak pihak ketiga atau konversi tambahan. Secara sederhana, image dengan format WebP lebih mudah ditampilkan oleh browser.

3. Membuat loading lebih cepat

   Karena ukurannya lebih kecil, ringan, dan formatnya lebih mudah di-render oleh browser, WebP memengaruhi kecepatan website secara signifikan. Website menjadi lebih cepat dan tentu saja akan memengaruhi peringkat juga.

   Page speed, pengukur kecepatan loading website besutan Google bahkan akan memberikan peringatan agar kita menggunakan format WebP.

4. Mendukung transparansi dan animasi

   WebP mendukung image dengan background transparan seperti PNG. Juga mendukung image dengan animasi seperti GIF dan SVG.

5. Menghemat kapasitas server

   Image disimpan di server atau hosting web kita. Semakin banyak image-nya, maka semakin besar pula kapasitas disk space yang diperlukan. Semakin besar disk space, maka semakin besar biaya yang harus kita keluarkan untuk biaya hosting. Maka dengan menggunakan image WebP yang notabene ukurannya lebih kecil, kita bisa menghemat kapasitas server sekaligus menghemat biaya untuk hosting.

6. Dapat digunakan di berbagai blogging platform

   Sejak versi 5.0.0, WordPress sudah mendukung format WebP. Blogspot pun sudah, meski saya kurang tahu kapan tepatnya, mungkin tahun 2022. Wix, Shopify, Tumblr pun sudah.

   Untuk blog atau website yang dibuat dengan bahasa pemrograman native atau SSG seperti Hugo, Laravel, CI, semuanya bisa karena tergantung pada kompatibilitas browser.

7. Kompatibel dengan Image CDN

   Pengguna image CDN? Tak perlu khawatir, sebab teknologi image CDN pun sudah kompatibel dengan WebP. Penyedia image CDN seperti Cloudinary dan Imagekit bahkan menyediakan konversi langsung sehingga Anda tidak perlu mengkonversi satu per satu.

8. Cocok untuk semua jenis image

   Dulu, sebelum ada WebP, untuk menjaga kualitas kita harus memilah mana yang harus pakai JPG, mana yang harus pakai PNG, mana yang pakai SVG.

   Misalnya, untuk logo yang ukurannya kecil tapi harus detail, saya sendiri kerap menggunakan SVG agar kualitasnya tetap bagus dan tidak ngeblur. Untuk image yang sekadar dekorasi, menggunakan JPG, sedangkan untuk yang perlu detail dan banyak tulisan seperti screenshot atau ilustrasi tutorial, harus pakai PNG. Sekarang, kita bisa menggunakan satu format untuk semuanya.

9. Lebih aman dari SVG

   SVG merupakan format image yang paling “sempurna” untuk logo atau ilustrasi yang ukurannya kecil. Sayangnya SVG memiliki isu keamanan sehingga beberapa platform tidak mengizinkan kita mengunggah gambar dengan format SVG. WebP bisa menjadi alternatif karena selain aman, kualitas gambarnya tetap bagus hingga cocok untuk logo atau ilustrasi yang ukurannya kecil seperti ikon.

10. Image converter on-the fly

    CMS seperti WordPress menyediakan beberapa plugin yang bisa digunakan untuk langsung mengkonversi semua image di blog ke WebP. Sayangnya, metode ini kerap kali membebani server sehingga saya menyarankan untuk mengkonversinya satu per satu.

---

Kekurangan Format WebP

1. Perlu dikonversi

   Salah satu kekurangan yang paling utama adalah WebP bukan format bawaan dari image di device kita. Kalau kita memotret dengan ponsel, misalnya, foto yang dihasilkan berformat PNG atau JPG sehingga harus dikonversi terlebih dahulu ke format WebP.

2. Tidak bisa digunakan oleh di beberapa image editor

   Meskipun format WebP cukup populer, tidak semua software image editor mendukung image WebP. Canva misalnya, kita hanya bisa memasukkan image dengan format PNG atau JPG, pun gambar yang dihasilkan tidak ada format WebP sehingga kita perlu mengkonversinya terlebih dahulu sebelum mengunggahnya ke blog.

   Produk Adobe versi tahun 2021 ke bawah juga tidak bisa. Di Figma, kita bisa memasukkan image dengan format WebP, tetapi untuk langsung export ke format WebP diperlukan plugin tambahan.

---

Cara Mengkonversi PNG atau JPG ke Format WebP

Banyak software atau web application yang bisa kita gunakan untuk mengkonversi image dengan format PNG ke format WebP, baik software berbayar maupun yang gratisan. Berikut beberapa image WebP converter gratis yang bisa Anda gunakan:

1. Squoosh . Ini web application yang biasa saya gunakan karena mudah digunakan dan tidak berbayar.
2. Figma , dengan plugin tambahan.
3. Convertio . Proses konversinya agak lama, tetapi cukup lumayan dan mendukung berbagai format image untuk dikonversi ke WebP. Bisa mengkonversi beberapa gambar sekaligus.
4. Cloud Convert . Kita bisa mengkonversi gambar dari komputer, URL, Google Drive, Dropbox, dan dari OneDrive.
5. Image resizer . Selain mengkonversi, kita juga bisa sekaligus mengubah ukurannya.

---

Dilihat dari banyaknya benefit dan “paksaan” dari browser, sebagai web developer saya menyarankan teman-teman untuk mulai menggunakan format WebP untuk image di blog. Untuk mengkonversi image lama, apalagi jika jumlahnya ratusan, memang membutuhkan waktu dan tenaga yang tidak sedikit. But believe me, it’s worth it. (eL)