Menggunakan gambar WebP

Katie Hempenius
Katie Hempenius

Mengapa Anda perlu tahu?

Gambar WebP lebih kecil daripada format JPEG dan PNG. Biasanya memiliki pengurangan ukuran file sebesar 25–35%. Hal ini mengurangi ukuran halaman dan meningkatkan performa.

  • YouTube mendapati bahwa beralih ke thumbnail WebP menghasilkan pemuatan halaman 10% lebih cepat.
  • Facebook mengalami penghematan ukuran file sebesar 25-35% untuk JPEG dan penghematan ukuran file sebesar 80% untuk PNG saat beralih menggunakan WebP.

WebP adalah pengganti gambar JPEG, PNG, dan GIF yang sangat baik. Selain itu, WebP menawarkan kompresi lossless dan lossy. Pada kompresi lossless, tidak ada data yang hilang. Kompresi lossy akan mengurangi ukuran file, tetapi dengan kemungkinan mengurangi kualitas gambar.

Mengonversi gambar ke WebP

Pengguna umumnya menggunakan salah satu pendekatan berikut untuk mengonversi gambar ke WebP: alat command line cwebp atau plugin WebP Imagemin (paket npm). Plugin WebP Imagemin umumnya merupakan pilihan terbaik jika project Anda menggunakan skrip build atau alat build (misalnya Webpack atau Gulp), sedangkan CLI adalah pilihan yang tepat untuk project sederhana atau jika Anda hanya perlu mengonversi gambar sekali.

Saat mengonversi gambar ke WebP, Anda memiliki opsi untuk menyetel berbagai setelan kompresi—tetapi bagi kebanyakan orang, satu-satunya hal yang perlu diperhatikan adalah setelan kualitas. Anda dapat menentukan tingkat kualitas dari 0 (terburuk) hingga 100 (terbaik). Sebaiknya coba hal ini, temukan tingkat mana yang merupakan kompromi yang tepat antara kualitas gambar dan ukuran file untuk kebutuhan Anda.

Gunakan cwebp

Konversikan satu file menggunakan setelan kompresi default cwebp:

cwebp images/flower.jpg -o images/flower.webp

Konversikan satu file menggunakan tingkat kualitas 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp

Mengonversi semua file dalam direktori:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Menggunakan Imagemin

Plugin WebP Imagemin dapat digunakan sendiri atau dengan alat build favorit Anda (Webpack/Gulp/Grunt/dll.). Proses ini biasanya melibatkan penambahan ~10 baris kode ke skrip build atau file konfigurasi untuk alat build Anda. Berikut contoh cara melakukannya untuk Webpack, Gulp, dan Grunt.

Jika tidak menggunakan salah satu dari alat build tersebut, Anda dapat menggunakan Imagemin saja sebagai skrip Node. Skrip ini akan mengonversi file dalam direktori images dan menyimpannya di direktori compressed_images.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

Menayangkan gambar WebP

Jika situs Anda hanya mendukung browser yang kompatibel dengan WebP, Anda dapat berhenti membaca. Jika tidak, tampilkan WebP ke browser yang lebih baru dan gambar penggantian ke browser lama:

Sebelum: html <img src="flower.jpg" alt="">

Setelah: html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>

Tag <picture>, <source>, dan <img>, termasuk cara pengurutannya secara relatif terhadap satu sama lain, semuanya berinteraksi untuk mencapai hasil akhir ini.

<picture>

Tag <picture> menyediakan wrapper untuk nol atau beberapa tag <source> dan satu tag <img>.

<source>

Tag <source> menentukan resource media.

Browser menggunakan sumber pertama yang tercantum dalam format yang didukungnya. Jika browser tidak mendukung salah satu format yang tercantum dalam tag <source>, browser akan kembali untuk memuat gambar yang ditentukan oleh tag <img>.

<img>

Tag <img> membuat kode ini berfungsi di browser yang tidak mendukung tag <picture>. Jika browser tidak mendukung tag <picture>, browser akan mengabaikan tag yang tidak didukungnya. Oleh karena itu, fungsi ini hanya "melihat" tag <img src="flower.jpg" alt=""> dan memuat gambar tersebut.

Membaca header Accept HTTP

Jika memiliki backend aplikasi atau server web yang memungkinkan Anda menulis ulang permintaan, Anda dapat membaca nilai header Accept HTTP, yang akan menunjukkan format gambar alternatif yang didukung:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Membaca header permintaan ini dan menulis ulang respons berdasarkan kontennya akan bermanfaat untuk menyederhanakan markup gambar Anda. Markup <picture> dapat menjadi cukup panjang di banyak sumber. Berikut adalah aturan mod_rewrite Apache yang dapat menyajikan alternatif WebP:

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

Jika menggunakan cara ini, Anda harus menyetel header respons Vary HTTP untuk memastikan cache akan memahami bahwa gambar dapat ditayangkan dengan berbagai jenis konten:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Content-Type"
  </IfModule>
</FilesMatch>

Aturan penulisan ulang di atas akan mencari versi WebP dari gambar JPEG atau PNG yang diminta. Jika ditemukan alternatif WebP, alternatif tersebut akan ditayangkan dengan header Content-Type yang tepat. Hal ini akan memungkinkan Anda menggunakan markup gambar yang mirip dengan berikut ini dengan dukungan WebP otomatis:

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

Memverifikasi penggunaan WebP

Lighthouse dapat digunakan untuk memverifikasi bahwa semua gambar di situs Anda ditayangkan menggunakan WebP. Jalankan Audit Performa Lighthouse (Lighthouse > Options > Performance) dan cari hasil audit Tayangkan gambar dalam format generasi berikutnya. Lighthouse akan mencantumkan gambar apa pun yang tidak ditayangkan di WebP.