Mengapa Anda harus peduli?
Gambar WebP lebih kecil daripada format JPEG dan PNG—biasanya di besarnya pengurangan ukuran file 25-35%. Hal ini mengurangi ukuran halaman dan meningkatkan performa.
- YouTube menemukan bahwa peralihan ke thumbnail WebP menghasilkan 10% pemuatan halaman yang lebih cepat.
- Facebook mengalami 25-35% penghematan ukuran file untuk JPEG dan 80% penghematan ukuran file untuk PNG saat mereka beralih menggunakan WebP.
WebP adalah pengganti yang sangat baik untuk gambar JPEG, PNG, dan GIF. Selain itu, WebP menawarkan kompresi lossless dan lossy. Pada kompresi lossless tidak ada data hilang. Kompresi lossy mengurangi ukuran file, tetapi dengan mengorbankan mengurangi kualitas gambar.
Mengonversi gambar ke WebP
Orang-orang umumnya menggunakan salah satu pendekatan berikut untuk mengonversi gambar ke WebP: alat command line cwebp atau plugin WebP Imagemin (npm ). Plugin WebP Imagemin umumnya merupakan pilihan terbaik jika project Anda menggunakan build skrip atau alat build (misalnya Webpack atau Gulp), sedangkan CLI adalah pilihan yang baik untuk proyek sederhana atau jika Anda hanya perlu mengonversi gambar sekali.
Saat mengonversi gambar ke WebP, Anda memiliki opsi untuk menyetel berbagai pengaturan kompresinya—tetapi bagi kebanyakan orang, satu-satunya hal yang Anda perlukan untuk penting bagi Anda adalah pengaturan kualitas. Anda dapat menentukan tingkat kualitas dari 0 (terburuk) hingga 100 (terbaik). Ada baiknya Anda mencoba-coba ini, tingkat mana yang merupakan kompromi yang tepat antara kualitas gambar dan ukuran file untuk mereka.
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
Gunakan Imagemin
Plugin WebP Imagemin dapat digunakan sendiri atau dengan alat build favorit Anda (Webpack/Gulp/Grunt/etc.). 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 {i>build<i} tersebut, Anda dapat menggunakan Imagemin sebagai
skrip Node. Skrip ini akan mengonversi file dalam direktori images dan
simpan 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 WebP browser, Anda dapat berhenti membaca. Jika tidak, menyajikan WebP ke browser yang lebih baru dan gambar penggantian ke browser lama:
Sebelum:
html
<img src="flower.jpg" alt="">
Sesudah:
html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
Tujuan
<picture>,
<source>,
dan <img>, termasuk cara pengurutannya relatif terhadap satu sama lain,
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 format yang tercantum dalam tag <source>, browser akan kembali memuat gambar yang ditentukan oleh tag <img>.
<img>
Tag <img> adalah hal yang membuat kode ini berfungsi di browser
yang tidak mendukung tag <picture>.
Jika browser tidak mendukung tag <picture>, browser akan
mengabaikan tag yang tidak didukung. Sehingga, sistem hanya “melihat” tindakan
<img src="flower.jpg" alt=""> dan memuat gambar tersebut.
Membaca header Accept HTTP
Jika Anda 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 apa saja yang didukung:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Membaca header permintaan ini dan menulis ulang respons berdasarkan kontennya bermanfaat untuk menyederhanakan markup gambar Anda. Markup <picture> bisa menjadi cukup panjang jika ada banyak sumber. Di bawah ini 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 menetapkan header respons Vary HTTP untuk memastikan cache akan memahami bahwa gambar mungkin 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 alternatif WebP ditemukan, alternatif tersebut akan ditayangkan dengan header Content-Type yang sesuai. Dengan begitu, Anda dapat menggunakan markup gambar yang mirip seperti 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 telah ditayangkan menggunakan WebP. Jalankan Audit Performa Lighthouse (Lighthouse > Opsi > Performa) dan cari hasil Tayangkan gambar di generasi berikutnya format ini. Lighthouse akan mencantumkan gambar apa pun yang tidak ditayangkan di WebP.