Mau Website Anda Lebih Cepat? Gunakan Format WebP

Setiap website yang sudah online, memiliki akar masalah yang sama untuk dipecahkan agar dapat sukses menjadi nomor satu. Salah satu masalah yang sangat urgen adalah kecepatan load. Hanya butuh waktu sekitar 3 detik saja, pengunjung website anda akan memutuskan untuk menunggu website selesai tampil sempurna atau pergi entah kemana. Oleh sebab itu kecepatan merupakan salah satu faktor penting yang menentukan keberhasilan sebuah website.

Kecepatan website ditentukan oleh banyak hal, salah satu faktornya adalah ukuran gambar. Semakin besar ukuran file gambar akan membuat waktu loading website anda semakin bertambah. Ukuran gambar yang dimaksud disini bukan dimensinya (panjang x lebar) tetapi yang lebih penting adalah ukuran file (kb atau Mb), Walaupun ada korelasi antara ukuran dimensi dengan ukuran file.

Mengapa Menggunakan WebP?

Bila anda ingin mempercepat waktu loading website anda, maka anda perlu memanipulasi agar ukuran file gambar sekecil mungkin tetapi tidak mengorbankan kualitas tampilannya. Sehingga tetap dapat tampil bagus untuk pengunjung. Nah disinilah tantangannya.

Untuk mengecek kecepatan webiste anda dan menemukan penyebab masalah yang menghambat kecepatan load, anda bisa menggunakan alat Speed Insight milik Google.

Untuk memecahkan masalah loading yang tidak maksimal karena gambar, Google memiliki solusi yang bisa anda manfaatkan. Yaitu dengan file menggunakan format WebP. Penasaran? yuk kepoin.

Apa itu WebP?

WebP adalah format gambar yang dapat tampil dengan kualitas maksimal tetapi ukuran file bisa lebih kecil dari format gambar JPEG, PNG atau juga GIF. Sehingga dengan ukuran yang kecil dapat diload lebih ringan dan cepat. Format WebP dikembangkan oleh Google sejak tahun 2010.

Kelebihan Format WebP

Sebagaimana telah disebutkan bahwa dengan menampilkan gambar di website dengan format WebP, maka gambar anda akan tampil jernih dengan ukuran yang kecil. Masalah ukuran gambar ini biasanya terjadi pada gambar raster dimana sangat berkaitan dengan jumlah pixel.

Pada dasarnya pengoptimalan ukuran atau sering dikenal sebagai kompresi gambar dengan mempertahankan bit data asli menggunakan metode pengompresan disebut Lossless. Bila dibandingkan dengan format JPEG, dengan tampilan yang sama format WebP mengkompresi atau lossless sekitar 34% lebih baik. Sedangkan dibandingkan PNG, format WebP mampu menghasilkan lossless 26% lebih baik.

Kekurangan Format WebP

Meskipun sudah dikembangkan Google Sejak 2010 tetapi format WebP ini belum banyak digunakan. Alasanya ternyata cukup disayangkan, yaitu belum banyak dukungan browser terhadap format ini. Karena sebuah Website akan dapat tampil untuk pengguna mesti menggunakan browser, sayangnya belum semua browser mengenali format WebP, maka berimbas belum banyak website yang mau menggunakan format ini.

Anda mungkin bertanya-tanya bagaimana akibatnya bila anda tetap menggunakan format WebP kemudian browser pengguna yang belum kompatible membaca format WebP digunakan untuk mengakses website anda? Anda tentu bisa menebak, ya betul. Gambar anda tidak akan tampil pada browser pengguna tersebut.

Tetapi, meskipun belum semua browser mendukung format WebP, Anda tidak perlu ragu menggunakan format WebP. Sebab, prosentase browser yang sudah mendukung dengan yang belum masih jauh lebih banyak yang sudah mendukung format ini. Bahkan Google Chrome saja sebagai browser peringkat pertama yang paling banyak digunakan sudah mencapai 75%, belum lagi ditambah browser lain yang sudah mendukung. Untuk mengetahui browser apa yang digunakan pengunjung anda, anda bisa memanfaatkan Google Analytics.

Tampilan JPEG dibanding WebP seperti gambar berikut ini, anda juga bisa melihat perbandingannya melalui keterangan Google yang mengulas WebP.

Browser apa saja yang sudah mendukung format WebP?

Agar anda dapat melihat data yang lebih akurat anda dapat mengakses link berikut menuju ke situs Can I use dengan pencarian webp. Kurang lebih akan tampildata browser yang support dan yang belum seperti berikut:

Pada tampilan tersebut Internet Exploler dan Safari versi terakhir belum support format WebP. Perlu diketahui bahwa Safari memiliki jumlah market share sebanyak 7.7%, jadi bila dibandingkan dengan Google Chrome yang 75% anda bisa menilai sendiri.

Kesimpulan

Bila anda sudah dapat memprediksi bahwa pengunjung website anda adalah pengguna Chrome atau browser lain yang mendukung format WebP, maka anda tidak perlu ragu menggunakan WebP. Tetapi bila pengguna anda kebanyakan menggunakan Safari atau Internet Exploler maka anda perlu menggunakan cara agar gambar anda tetap ditampilkan dalam format yang didukung browser ini.

Solusi Browser Tidak Support Format WebP

Bila anda menggunakan Wordpress pada website anda, maka anda bisa menggunakan plugin yang bisa mendeteksi browser yang digunakan pengunjung support atau tidak dengan format WebP. Bila tidak support maka plugin akan menampilkan gambar dalam format JPEG atau PNG. Silahkan anda temukan plugin tersebut pada list pilihan plugin Wordpress.

Bila anda tidak menggunakan Wordpress, anda masih dapat menggunakan JavaScript untuk mendeteksi bahwa browser support atau tidak format WebP. Sehingga anda dapat mengatur sendiri gambar yang ingin anda tampilkan bila browser tidak mendukung. Script untuk mendeteksinya seperti berikut:

function cekWebP() {
    var elem = document.createElement('canvas');

    if (!!(elem.getContext && elem.getContext('2d'))) {
        // was able or not to get WebP representation
        return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
    }

    // very old browser like IE 8, canvas not supported
    return false;
}

inKONSTELASI ILMU

Pages