Mengapa Anda harus peduli?
Gambar WebP lebih kecil daripada JPEG dan PNG—biasanya dengan besaran pengurangan ukuran file sebesar 25–35%. Hal ini akan mengurangi ukuran halaman dan meningkatkan performa.
- YouTube mendapati bahwa beralih ke thumbnail WebP menghasilkan pemuatan halaman yang 10% lebih cepat.
- Facebook mengalami penghematan ukuran file 25-35% untuk JPEG dan penghematan ukuran file 80% untuk PNG saat beralih menggunakan WebP.
WebP adalah pengganti yang sangat baik untuk gambar JPEG, PNG, dan GIF. Selain itu, WebP menawarkan kompresi lossless dan lossy. Dalam kompresi lossless, tidak ada data yang hilang. Kompresi lossy mengurangi ukuran file, tetapi dengan mengorbankan kemungkinan pengurangan kualitas gambar.
Mengonversi gambar ke WebP
Orang biasanya menggunakan salah satu pendekatan berikut untuk mengonversi gambar mereka 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 baik untuk project sederhana atau jika Anda hanya perlu mengonversi gambar sekali.
Saat mengonversi gambar ke WebP, Anda memiliki opsi untuk menetapkan berbagai setelan kompresi—tetapi bagi sebagian besar orang, satu-satunya hal yang perlu Anda perhatikan adalah setelan kualitas. Anda dapat menentukan tingkat kualitas dari 0 (terburuk) hingga 100 (terbaik). Sebaiknya coba-coba, temukan tingkat yang tepat antara kualitas gambar dan ukuran file untuk kebutuhan Anda.
Menggunakan 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.). Hal ini biasanya melibatkan penambahan ~10 baris kode ke skrip build atau file konfigurasi untuk alat build Anda. Berikut adalah contoh cara melakukannya untuk Webpack, Gulp, dan Grunt.
Jika tidak menggunakan salah satu alat build tersebut, Anda dapat menggunakan Imagemin saja sebagai
skrip Node. Skrip ini akan mengonversi file di 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, sajikan WebP ke browser yang lebih baru dan gambar penggantian ke browser yang lebih 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 tag tersebut diurutkan 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 tidak mendukung format yang tercantum dalam tag <source>, browser akan kembali memuat gambar yang ditentukan oleh tag <img>.
<img>
Tag <img> adalah yang membuat kode ini berfungsi di browser
yang tidak mendukung tag <picture>.
Jika tidak mendukung tag <picture>, browser akan mengabaikan tag yang tidak didukung. Dengan demikian, tag 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 mengiklankan 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 mempermudah markup gambar Anda. Markup <picture> dapat menjadi cukup panjang dengan banyak sumber. Berikut adalah aturan mod_rewrite Apache yang dapat menayangkan 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 memilih rute ini, Anda harus menetapkan 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 akan ditayangkan dengan header Content-Type yang sesuai. Tindakan ini akan memungkinkan Anda menggunakan markup gambar yang mirip dengan contoh berikut 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 Menayangkan gambar dalam format generasi berikutnya. Lighthouse akan mencantumkan gambar yang tidak ditayangkan dalam WebP.