Mengenal Format Gambar Google’s WebP

Photo & Video Website

WebP adalah format gambar modern yang dikembangkan oleh google. Kata pepatah “Sebuah gambar dapat menafsirkan ribuan kata”. Daya tarik visual telah menjadi sangat penting dalam sebuah situs web. Saat ini, gambar telah menguasai 60% konten di Internet. Kecantikan dari sebuah konten dan cerita yang diberikan. Gambar dapat menghidupkan tampilan website dan lebih terhubung ke user.

Berikut apa yang Mozilla Developer Network katakan tentang Image.
“Pada awalnya, Web hanyalah teks, dan itu benar-benar sangat membosankan. Untungnya, itu tidak terlalu lama sebelum kemampuan untuk menanamkan gambar (serta jenis konten lain yang lebih menarik) di dalam halaman web ditambahkan. Ada beberapa jenis multimedia yang perlu dipertimbangkan, tetapi logis untuk memulai dengan elemen <img> yang sederhana, yang digunakan untuk menyematkan gambar sederhana di laman web.”
Untuk menampilan gambar dalam halaman web, kita dapat menggunakan <img> tag dan menulis link dari gambar pada atribut src. Contohnya seperti berikut
<img src=”cukur.jpg”>
Atau juga
<img src=”https://ideapa.id/blog/wp-content/uploads/2019/02/cukur.jpg”>
Kedua kode diatas akan menghasilkan gambar ini
Ya itu hanya contoh sederhana dari cara menampilkan gambar di dalam halaman web. Namun, dalam halaman web yang memiliki banyak konten menambahkan gambar akan memberikan dua pertimbangan utama :
  1. Memilih format gambar yang tepat
  2. Optimisasi Gambar

Mari mulai dari format gambar yang paling populer yaitu .JPG/.JPEG dan .PNG

1. JPG/ JPEG ( Joint Photographic Experts Group )

JPG mungkin merupakan sebuah format gambar yang paling umum digunakan di dalam website. JPG sangat kompatibel dengan ukuran file kecil namun kualitas yang bisa dibilang kurang. Gambar JPG disimpan menggunakan kompresi lossy, sehingga selalu ada kualitas gambar yang hilang saat menggunakan format ini.

File JPEG biasanya digunakan untuk menampilan foto di web, karena mereka membuat file yang lebih kecil dan dapat dengan mudah dimuat pada halaman. Hal ini sangat mengurangi waktu render / loading situs web dan halaman memuat dengan cepat bagi pengunjung situs. Akan tetapi file JPEG buruk untuk gambar garis atau logo atau grafik, karena kompresi membuatnya terlihat pixelated / pecah.

Kelebihan : Ukuran file kecil yang serbaguna
Kekurangan :  Kehilangan detail
Kegunaan : Foto berwarna, gambar kurang detail

2. PNG (Portable Network Graphics)

PNG berisi bitmap warna yang diindeks dan PNG menggunakan format lossless 8-bit yang mendukung 256 warna maksimal. PNG adalah format kompresi gambar lossless yang paling sering digunakan di Internet.

Namun, untuk foto PNG tidak sebagus JPEG, karena membuat file yang lebih besar. PNG adalah format terbaik untuk screen capture dan sebagian besar komputer akan menyimpan screen capture secara otomatis sebagai PNG karena sebagian besar screen capture merupakan campuran dari gambar dan teks.
Kelebihan: Serbaguna, mendukung transparansi
Kekurangan: File size lebih besar
Kegunaan: Gambar Grafis

Dan munculah WebP !

“WebP adalah format gambar modern yang memberikan kompresi lossless dan lossy yang paling unggul untuk gambar di web. Dengan menggunakan WebP, webmaster dan web developer dapat membuat gambar yang lebih kecil dan lebih bagus yang dapat membuat web render / loading lebih cepat.”
WEBP adalah format gambar yang dikembangkan oleh Google. Dan format ini dirancang untuk digunakan secara khusus di web. WebP menggunakan fitur algoritma kompresi lossy dan lossless yang sangat mengurangi ukuran file namun mempertahankan kualitas gambar asli.
“Gambar lossless WebP berukuran 26% lebih kecil dibandingkan dengan PNG. Gambar webp lossy 25-34% lebih kecil dari gambar JPEG yang sebanding pada kualitasnya.”
Format ini mengambil bagian terbaik dari format JPG lossy dan format PNG lossless dan membuatnya tersedia dalam file yang ringkas! WebP dapat digunakan pada sejumlah gambar grafis dan gambar transparan yang memungkinkan pengguna untuk menyesuaikan tingkat kompresi untuk membuat pertukaran antara ukuran file dan kualitas gambar. Saat ini WebP didukung di browser Chrome dan Opera.

Lalu, bagaimana cara menggunakan format gambar WebP?

1. Mengubah gambar ke format WebP

  • Dokumentasi WebP menyediakan akses ke utilitas yang telah dikompilasi, library serta kerangka kerja untuk mengubah gambar PNG dan JPEG menjadi gambar WebP.
  • Plugin pada Adobe Photoshop
  • Android Studio
  • Alat CLI (Command Line Interface) untuk pemformatan gambar seperti ImageMagick
  • Konverter online

2. Memeriksa apakah format WebP dapat dijalankan pada browser

  • Modernizr — adalah library JavaScript untuk mendeteksi dukungan fitur HTML5 dan CSS3 di browser web. Anda dapat menggunakan properti seperti Modernizr.webp, Modernizr.webp.lossless dll untuk memeriksa dan menggunakan gambar webP.
  • Polyfills — WebPJS merupakan part kecil dari polyfill yang digunakan untuk mendukung WebP format tanpa mengubah syntax kode html5
  • Picturefill — memungkinkan menggunakan elemen / tag <picture> di browser yang tidak didukung oleh format WebP.

Secara keseluruhan, sangat mudah untuk melakukan konversi gambar ke format WebP.

Kelebihan: Serba guna, file size yang lebih kecil, kualitas gambar yang bagus
Kekurangan: Sedikit Browser yang support, masih dalam tahap pengembangan, perlu untuk melakukan backup pada gambar
Kegunaan: Hampir bisa untuk segalanya!

 

Kesimpulan

Potensi untuk WebP sangat besar!! Format yang serba guna sehingga dapat bekerja dengan ajaib pada semua jenis format gambar yang sudah ada untuk menghasilkan gambar yang lebih kecil dengan kualitas baik. Mereka membantu dalam memuat gambar di web lebih cepat, mengurangi waktu render / loading untuk halaman web dan sangat meningkatkan pengalaman pengguna dengan situs web memuat cepat memiliki gambar yang indah. Cakupan untuk meningkatkan pengalaman pengguna di browser seluler menggunakan gambar WebP luar biasa!