Bu konu neden önemli?
WebP resimleri, JPEG ve PNG muadillerinden daha küçüktür. Genellikle dosya boyutunda %25-35 oranında bir azalma olur. Bu sayede sayfa boyutları küçülür ve performans artar.
- YouTube, WebP küçük resimlerine geçişin %10 daha hızlı sayfa yükleme sağladığını tespit etti.
- Facebook, WebP'ye geçtikten sonra JPEG'lerde %25-35, PNG'lerde ise %80 oranında dosya boyutu tasarrufu elde etti.
WebP; JPEG, PNG ve GIF resimler için mükemmel bir alternatiftir. Ayrıca WebP, hem kayıpsız hem de kayıplı sıkıştırma sunar. Kayıpsız sıkıştırmada veri kaybı olmaz. Kayıplı sıkıştırma, dosya boyutunu küçültür ancak resim kalitesini düşürebilir.
Resimleri WebP'ye dönüştürün
Kullanıcılar genellikle resimlerini WebP'ye dönüştürmek için şu yaklaşımlardan birini kullanır: cwebp komut satırı aracı veya Imagemin WebP eklentisi (npm paketi).
Projenizde derleme komut dosyaları veya derleme araçları (ör.Webpack veya Gulp) kullanılıyorsa Imagemin WebP eklentisi genellikle en iyi seçenektir. CLI ise küçük projeler veya resimleri yalnızca bir kez dönüştürmeniz gerekiyorsa iyi bir seçenektir.
Resimleri WebP'ye dönüştürürken çok çeşitli sıkıştırma ayarları yapabilirsiniz ancak çoğu kullanıcı için dikkat etmeniz gereken tek şey kalite ayarıdır. 0 (en kötü) ile 100 (en iyi) arasında bir kalite düzeyi belirtebilirsiniz. Bu ayarı kurcalayarak ihtiyaçlarınız için resim kalitesi ve dosya boyutu arasında doğru dengeyi sağlayan seviyeyi bulabilirsiniz.
cwebp hareketini kullanın
cwebp uygulamasının varsayılan sıkıştırma ayarlarını kullanarak tek bir dosyayı dönüştürme:
cwebp images/flower.jpg -o images/flower.webp
50 kalite düzeyini kullanarak tek bir dosyayı dönüştürme:
cwebp -q 50 images/flower.jpg -o images/flower.webp
Bir dizindeki tüm dosyaları dönüştürme:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Imagemin kullanma
Imagemin WebP eklentisi tek başına veya favori derleme aracınızla (Webpack/Gulp/Grunt/vb.) kullanılabilir. Bu işlem genellikle derleme aracınızın derleme komut dosyasına veya yapılandırma dosyasına yaklaşık 10 satır kod eklemeyi içerir.
Bu derleme araçlarından birini kullanmıyorsanız Imagemin'i tek başına Node komut dosyası olarak kullanabilirsiniz. Bu komut dosyası, images dizinindeki dosyaları dönüştürür ve compressed_images dizinine kaydeder.
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
WebP resimleri sunma
Siteniz yalnızca WebP uyumlu tarayıcıları destekliyorsa okumayı bırakabilirsiniz. Aksi takdirde, yeni tarayıcılara WebP, eski tarayıcılara ise yedek resim sunun:
Önce:
<img src="flower.jpg" alt="">
Sonra:
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
<picture>, <source> ve <img> etiketleri, birbirlerine göre sıralanma şekilleri de dahil olmak üzere bu nihai sonuca ulaşmak için etkileşim kurar.
<picture>
<picture> etiketi, sıfır veya daha fazla <source> etiketi ve bir <img> etiketi için sarmalayıcı sağlar.
<source>
<source> etiketi bir medya kaynağını belirtir.
Tarayıcı, desteklediği biçimdeki ilk listelenen kaynağı kullanır. Tarayıcı, <source> etiketlerinde listelenen biçimlerden hiçbirini desteklemiyorsa <img> etiketiyle belirtilen resmi yüklemeye geri döner.
<img>
<img> etiketi, bu kodun <picture> etiketini desteklemeyen tarayıcılarda çalışmasını sağlar.
Bir tarayıcı <picture> etiketini desteklemiyorsa desteklemediği etiketleri yoksayar. Bu nedenle, yalnızca <img src="flower.jpg" alt=""> etiketini "görür" ve bu resmi yükler.
HTTP Accept üstbilgisini okuma
İstekleri yeniden yazmanıza olanak tanıyan bir uygulama arka ucu veya web sunucunuz varsa desteklenen alternatif resim biçimlerini bildiren HTTP Accept üstbilgisinin değerini okuyabilirsiniz:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Bu istek başlığını okuyup yanıtı içeriğine göre yeniden yazmak, resim işaretlemenizi basitleştirme avantajı sağlar. <picture> işaretlemesi, çok sayıda kaynakla oldukça uzun olabilir. Aşağıda, WebP alternatifleri sunabilen bir Apache mod_rewrite kuralı verilmiştir:
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]
Bu yöntemi tercih ederseniz önbelleklerin, resmin Accept başlığına bağlı olarak farklı şekilde sunulabileceğini anlaması için HTTP Vary yanıt başlığını ayarlamanız gerekir:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Accept"
</IfModule>
</FilesMatch>
Önceki yeniden yazma kuralı, istenen JPEG veya PNG resimlerinin WebP sürümünü arar. Alternatif bir WebP bulunursa uygun Content-Type başlığıyla sunulur. Bu sayede, otomatik WebP desteğiyle aşağıdakine benzer bir resim işaretlemesi kullanabilirsiniz:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
WebP kullanımını doğrulama
Lighthouse, sitenizdeki tüm resimlerin WebP kullanılarak sunulduğunu doğrulamak için kullanılabilir. Lighthouse Performans Denetimi'ni (Lighthouse > Seçenekler > Performans) çalıştırın ve Resimleri yeni nesil biçimlerde yayınlayın denetiminin sonuçlarına bakın. Lighthouse, WebP biçiminde sunulmayan tüm resimleri listeler.