Menggunakan Webp di Website

Kurang lengkap rasanya kalau kita membuat sebuah website tanpa menambahkan gambar di dalamnya, tapi terkadang kita berfikir, kalau mau menambahkan gambar, tentunya harus memiliki kualitas yang bagus dong… biar kelihatan keren.

Tapi… pada kenyataannya website kita jadi lelet, dan setelah kita cek, ternyata ukuran gambar yang kita tambahkan tadi 53kb 😞, kemudian kita berfikir lagi, gimana kalau gambarnya di compress, pastinya jadi lebih kecil dong...

Setelah kita compress gambar tersebut, ternyata sizenya jadi lebih kecil, tapi kok ada bintik — bintiknya 😞

Na… untuk mengatasi masalah itu, kita akan menggunakan gambar yang memiliki extension Webp, yang tentunya memiliki size lebih kecil dan kualitasnya lebih bagus dari pada original gambar yang di compress.

Kira — kira perbedaannya seperti ini:

Perbandingan Gambar JPG yang di compress dengan Webp

Tapi masalahnya…, webp hanya mendukung beberapa browser saja yaitu :

Can I Use

Tapi jangan khawatir…., saya memiliki 2 cara untuk mengatasi masalah seperti itu

Cara #1

Menggunakan syntax picture HTML, contohnya seperti ini

Dikode ini si HTML berbincang — bincang dengan browser

HTML : Hei browser, kamu support webp tidak?
Browser: Sorry bro, saya belum support webp 😞
HTML: Hmmz…, tapi kamu support JPG kan…?
Browser: Kalau JPG saya support, tapi saya nggak support syntax source 😞
HTML: Ya sudah, pakai syntax img aja 😃
Browser: Siap... :)

Cara #2

Menggunakan Modernizr untuk mendeteksi fitur di browser user.

Caranya yaitu:

1. Buka website Modernizr
2. Click Add your detects
3. Search Webp
4. Kemudian click Build
5. Click Download
6. Inject code yang sudah kalian build tapi ke website

Dengan menambahkan Modernizr di website kita, maka secara otomatis ketika kita masuk ke website, si Modernizr akan mengecek, apakah browser yang di gunakan user ini support webp atau tidak.

Jika support, maka Modernizr akan menambahkan class webp di syntax html, jika tidak support, maka Modernizr akan menambahkan class no-webp di sintax html.

Jadi, kalau mau mengunakan gambar webp sebagai background di website, cukup seperti ini saja

Na… itu tadi 2 cara untuk mengatasi browser yang tidak support dengan webp, mungkin kalau kalian ada cara lain, tolong cantumkan di kolom komentar ya…
nanti akan saya tambahkan di sini hehehe 😃

Kesimpulan

Awesome, walaupun Webp memiliki ukuran dan kualitas yang lebih bagus dari pada JPG yang di compress, tapi Webp hanya support di beberapa browser saja 😞, semoga kedepannya Webp support di semua browser 😃

Semoga tutorial ini dapat membantu kalian dan tolong ingatkan saya kalau ada penjelasan atau tutur kata saya yang salah ya… 😃
See you on the next article.

Originally published at logustra.com on December 11, 2018.