Apa itu WebP? dan Apa Kelebihan dan Kekurangan WebP

<p>Pada artikel sebelumnya saya sudah membahas tentang <a href&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;cara-mengubah-gambar-menjadi-webp-di-wordpress&sol;">Cara Mengubah Gambar Menjadi WebP di WordPress<&sol;a>&period; Dimana&comma; tujuan dari tutorial tersebut adalah kita akan mengubah format PNG atau JPG menjadi for WebP ketika diupload ke media wordpress&period; Webp &lpar;atau biasa yang dibaca webpi&rpar; adalah format gambar digital terbaru dari Google&period; Webp&comma; atau bisa dibaca Weppi sebenarnya sudah dikembangkan sejak 30 September 2010&period; Namun&comma; karena banyak perangkat yang belum mendukung untuk format tersebut&comma; sehingga kurang dikenal luas&period; Ekstensi WebP masih kalah populer dibanding ekstensi lainnya seperti PNG&comma; JPEG dan GIF&period;<&sol;p>&NewLine;<p>Pada umumnya format gambar itu ada PNG&comma; JPG&comma; JPEG dan GIF&period; Dan dari beberapa ekstensi gambar memiliki kekurangan dan kelebihan&comma; misalnya&colon;<&sol;p>&NewLine;<ul>&NewLine;<li><strong>PNG <&sol;strong>ideal untuk gambar yang tidak terlalu melibatkan banyak data misalnya logo atau hasil screenshot&period; Format ini mampu mempertahankan kualitas gambar saat dikompresi&comma; dan mendukung transparansi&period; Namun&comma; format ini kurang bagus untuk fotografi&period;<&sol;li>&NewLine;<li><strong>JPG&sol;JPEG <&sol;strong>merupakan format yang dapat menampilkan gambar yang sangat detail dengan banyak warna&period; Format ini sangat cocok untuk fotografi&period; Namun&comma; ukuran filenya cenderung lebih besar dari format yang lain dan hasilnya kurang baik bila dikompresi&period; Selain itu&comma; format JPEG tidak mendukung transparansi&period;<&sol;li>&NewLine;<li><strong>GIF <&sol;strong>sangat baik untuk gambar animasi sederhana&comma; dan ukuran filenya lebih kecil dari format lainnya&period; Namun&comma; GIF kurang bagus untuk gambar statis&period;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>Oleh karena itu&comma; google mengembangkan sendiri ekstensi gambar yang akan ditampilkan di website&comma; dengan mengembangkan gambar dengan form webp&period; Google merancang webp untuk memungkinkan kita menampilkan gambar di web dengan kualitas yang sama dengan format gambar yang ada&comma; tetapi dengan ukuran file yang lebih kecil&period;<&sol;p>&NewLine;<p>Secara ukuran&comma; memang webp ini mempunyai ukuran hingga 80&percnt; lebih kecil dari pada ekstensi lainnya&period; Anda bisa lihat dari perbandingan berikut ini&colon;<a href&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;wp-content&sol;uploads&sol;Screenshot&lowbar;412&period;webp"><img class&equals;"aligncenter size-full wp-image-7469" src&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;wp-content&sol;uploads&sol;Screenshot&lowbar;412&period;webp" alt&equals;"apa itu webp" width&equals;"1236" height&equals;"713" &sol;><&sol;a><&sol;p>&NewLine;<p>Dengan kualitas yang sama&comma; anda bisa menghemat ukuran gambar dengan 80&percnt; WOW&excl;&excl;<&sol;p>&NewLine;<p><a href&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;wp-content&sol;uploads&sol;xwebp-vs-png-lossless-compression-1120x642&period;png&period;pagespeed&period;ic&lowbar;&period;ayj7ulmvj-1066x611-1&period;webp"><img class&equals;"aligncenter size-full wp-image-7471" src&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;wp-content&sol;uploads&sol;xwebp-vs-png-lossless-compression-1120x642&period;png&period;pagespeed&period;ic&lowbar;&period;ayj7ulmvj-1066x611-1&period;webp" alt&equals;"apa itu webp" width&equals;"1066" height&equals;"611" &sol;><&sol;a><&sol;p>&NewLine;<h2><strong>Apa itu WebP&quest; dan Apa Kelebihan dan Kekurangan WebP<&sol;strong><&sol;h2>&NewLine;<h3><strong>Kelebihan WebP<&sol;strong><&sol;h3>&NewLine;<p>Seperti yang sudah saya katakan sebelumnya&comma; format ini dibuat untuk menyediakan opsi yang lebih baik untuk menampilkan gambar pada media website dengan ukurannya yang lebih kecil&period;<&sol;p>&NewLine;<p>Ukuran gambar sangatlah penting dalam sebuah website&period; Dimana&comma; dalam kondisi tertentu kualitas gambar website tidak begitu penting&comma; karena biasanya gambar di website hanya untuk ditampilkan di layar monitor&comma; bukan untuk dicetak&period;<&sol;p>&NewLine;<p>Dengan mengecilnya ukuran sebuah gambar&comma; ini bisa menghemat ruang hardisk &lpar;storage&rpar; hosting anda&period; Disisi lain&comma; Semakin kecil ukuran sebuah gambar&comma; maka cepat halaman website tersebut bisa diaksses&period; Terlalu banyak gambar dengan ukuran besar akan membuat sebuah website menjadi lambat&comma; dan pada akhirnya menurunkan reputasi website tersebut&period; <strong>Baca &colon; <a href&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;10-tips-mempercepat-loading-website-wordpress&sol;">10 Tips Mempercepat Loading Website WordPress<&sol;a><&sol;strong><&sol;p>&NewLine;<p>Dengan tidak berkurangnya kualitas yang begitu signifikan&comma; webp menjadi alternatif bagi anda yang ingin membuat loading halaman website menjadi lebih cepat&comma; namun tidak mengurangi kualitas gambar&period;<&sol;p>&NewLine;<h3><strong>Kekurangan WebP<&sol;strong><&sol;h3>&NewLine;<p>Selain kelebihan webp&comma; ada pula kekurangannya yaitu webp belum disupport sepenuhnya oleh browser&period; Meskipun webp sudah dikembangkan dari tahun 2010&comma; namun sayangnya masih banyak browser yang belum mendukung untuk format tersebut&period; Menurut <a href&equals;"https&colon;&sol;&sol;caniuse&period;com&sol;&quest;search&equals;webp" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">Can I use<&sol;a>…&comma; saat ini broswer yang mendukung WebP file adalah Chrome&comma; Firefox&comma; Opera&comma; Opera Mini&comma; Android Browser&comma; Edge&comma; dan Samsung Internet&period;<a href&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;wp-content&sol;uploads&sol;webp-image-format&period;png"><img class&equals;"aligncenter size-full wp-image-7472" src&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;wp-content&sol;uploads&sol;webp-image-format&period;png" alt&equals;"" width&equals;"1376" height&equals;"731" &sol;><&sol;a>Sedangkan&comma; <strong>Internet Explorer<&sol;strong> dan <strong>Safari <&sol;strong>&lpar;browser milik Apple&rpar; belum kompatibel dengan WebP file&period; Sebenarnya&comma; Apple sempat melakukan eksperimen di tahun 2016 untuk menggunakan WebP file di Safari&period; Tetapi sampai sekarang&comma; mereka belum memberi kabar lebih lanjut soal itu&period;<&sol;p>&NewLine;<p>Jadi&comma; seandainya Anda memakai format WebP pada website&comma; pengunjung yang nantinya mengakses dari Safari tidak akan bisa melihat tampilan gambar Anda&period;<&sol;p>&NewLine;<p>Meskipun masih ada beberapa browser yang mendukung form webp ini&comma; anda tidak perlu ragu untuk menggunakan format tersebut&period; Kenapa&quest;<&sol;p>&NewLine;<p>Alasannya&comma; Chrome masih menduduki browser populer pertama di Indonesia&period; StatCounter menunjukkan kalau <em>market share <&sol;em>Chrome mencapai 75&percnt;&period; Sedangkan Safari menjadi urutan kedua dengan jumlah market share yaitu 7&period;7&percnt;&period;<&sol;p>&NewLine;<p>Angka yang cukup jauh bukan&quest; jadi&comma; bisa disimpulkan mayoritas pengguna internet menggunakan browser <strong>chrome&period; <&sol;strong>Untuk memastikan&comma; anda bisa melihat google analitycs untuk melihat browser mana yang paling banyak digunakan oleh pengunjung situs anda&period;<&sol;p>&NewLine;<p>Untuk permasalahan tersebut tentu saja anda bisa mengatasinya dengan menggunakan plugin &lpar;jika website anda menggunakan wordpress&rpar;&period; Cara kerja plugin tersebut adalah&colon;<&sol;p>&NewLine;<ul>&NewLine;<li>Plugin akan mengkompres gambar JPEG menjadi WebP untuk pengunjung yang memakai Chrome&comma; Firefox&comma; Opera&comma; Android Browser&comma; Edge dan Samsung Internet&period;<&sol;li>&NewLine;<li>Plugin akan mengkompres gambar kembali dari WebP ke JPEG untuk pengunjung yang memakai Safari atau browser yang belum kompatibel&period;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>Beberapa plugin yang anda gunakan adalah&colon;<&sol;p>&NewLine;<ul>&NewLine;<li>ShortPixel<&sol;li>&NewLine;<li>Imagify<&sol;li>&NewLine;<li>Optimole<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>Namun sayangnya plugin tersebut merupakan plugin berbayar&period;<&sol;p>&NewLine;<p><strong>Kesimpulan<&sol;strong><&sol;p>&NewLine;<p>Jadi&comma; gambar merupakan komponen penting dalam <a href&equals;"https&colon;&sol;&sol;www&period;tutorialpedia&period;net&sol;mempercepat-loading-website-dengan-plugin&sol;" target&equals;"&lowbar;blank" rel&equals;"noopener noreferrer">kecepatan website<&sol;a>&period; Itulah sebabnya&comma; kita perlu mengoptimasi gambar&comma; agar loading website anda menjadi lebih cepat&period; Untuk itu google mengembangkan sebuah format gambar baru&comma; dimana format ini bisa mengurangi ukuran hingga 80&percnt; lebih kecil dibandingkan format JPEG dan PNG — tapi tidak mengurangi kualitas gambar itu sendiri&period;<&sol;p>&NewLine;<p>Dikarenakan beberapa browser belum mendukung format webp tersebut&period; Maka anda perlu menggunakan plugin seperti <strong>ShortPixel<&sol;strong>&comma; <strong>Imagify <&sol;strong>dan <strong>Optimole<&sol;strong>&period; untuk mengatasi masalah tersebut&period;<&sol;p>&NewLine;<p>Sayangnya ketiga plugin tersebut tidak menawarkan layanan gratis&period; Artinya&comma; anda harus membeli lisensi untuk bisa menggunakan plugin tersebut secara full<&sol;p>&NewLine;<p>Alternatif lain yang bisa anda gunakan plugin <strong>WebExpress <&sol;strong>atau anda juga bisa menggunakan converter online seperti <strong>XnConvert<&sol;strong>&comma; <strong>Zamzar<&sol;strong>&comma; <strong>FileZigZag<&sol;strong>&comma; <strong>Adapter <&sol;strong>dan <strong>PixConverter<&sol;strong>&period;<&sol;p>&NewLine;<p>Bagaimana&quest; Tertarik untuk mencoba&quest;<&sol;p>&NewLine;