Bu konu neden önemli?
WebP resimleri, JPEG ve PNG'dekilerden daha küçüktür. Bu da genellikle dosya boyutunda% 25-35'lik bir küçülmeye yol açar. Bu, sayfa boyutlarını küçültür ve performansı artırır.
- YouTube, WebP küçük resimlerine geçişin sayfaların %10 daha hızlı yüklenmesini sağladığını tespit etti.
- Facebook, WebP'ye geçtiklerinde JPEG'ler için% 25-35 ve PNG'ler için% 80 dosya boyutunda tasarruf eder.
WebP; JPEG, PNG ve GIF resimleri için mükemmel bir alternatiftir. Ek olarak, 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, resim kalitesinin düşmesi pahasına dosya boyutunu küçültür.
Resimleri WebP'ye dönüştürün
Kullanıcılar, görsellerini WebP'ye dönüştürmek için genellikle ş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 basit projelerde veya görüntüleri yalnızca bir kez dönüştürmeniz gerekiyorsa resimleri yalnızca bir kez dönüştürmeniz gerektiğinde genellikle en iyi seçenektir.
Resimleri WebP'ye dönüştürdüğünüzde çok çeşitli sıkıştırma ayarları yapabilirsiniz. Ancak çoğu kişi için önem vermeniz gereken tek şey kalite ayarıdır. 0 (en kötü) ile 100 (en iyi) arasında bir kalite seviyesi belirleyebilirsiniz. Bu konuda denemeler yapabilirsiniz. Resim kalitesi ile dosya boyutu arasında ihtiyaçlarınıza uygun dengenin hangisi olduğunu bulmak için bu değeri kullanabilirsiniz.
cwebp kullanma
cwebp'nin varsayılan sıkıştırma ayarlarını kullanarak tek bir dosyayı dönüştürün:
cwebp images/flower.jpg -o images/flower.webp
50 kalite düzeyini kullanarak tek bir dosyayı dönüştürün:
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'i kullan
Imagemin WebP eklentisini tek başına veya en sevdiğiniz derleme aracıyla (Webpack/Gulp/Grunt/vb.) kullanabilirsiniz. Bu işlem genellikle, derleme aracınızın yapılandırma dosyasına veya derleme komut dosyasına yaklaşık 10 satır kod eklemeyi içerir. Webpack, Gulp ve Grunt için bunu nasıl yapacağınıza dair örnekleri burada bulabilirsiniz.
Bu derleme araçlarından birini kullanmıyorsanız Imagemin'i Düğüm komut dosyası olarak tek başına kullanabilirsiniz. Bu komut dosyası, images dizinindeki dosyaları dönüştürüp 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 yayınla
Siteniz yalnızca WebP uyumlu tarayıcıları destekliyorsa okumayı durdurabilirsiniz. Aksi takdirde, WebP'yi yeni tarayıcılara, eski tarayıcılara da yedek resim sunun:
Önce:
html
<img src="flower.jpg" alt="">
Sonra:
html
<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 nasıl sıralandıkları dahil) bu nihai sonucu elde etmek için birbirleriyle etkileşime girer.
<picture>
<picture> etiketi, sıfır veya daha fazla <source> etiketi ve bir <img> etiketi için bir sarmalayıcı sağlar.
<source>
<source> etiketi bir medya kaynağı belirtir.
Tarayıcı, desteklediği bir biçimdeki ilk listelenen kaynağı kullanır. Tarayıcı, <source> etiketlerinde listelenen biçimlerden hiçbirini desteklemiyorsa <img> etiketinde belirtilen resmi yüklemeye devam eder.
<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. Dolayısıyla, yalnızca <img src="flower.jpg" alt=""> etiketini "görür" ve bu resmi yükler.
HTTP Accept üst bilgisini okuma
Yeniden yazma isteklerine olanak tanıyan bir uygulama arka ucunuz veya web sunucunuz varsa desteklenen alternatif resim biçimlerinin reklamını yapmak için HTTP Accept üst bilgisinin değerini okuyabilirsiniz:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Bu istek başlığını okumak ve yanıtı içeriğine uygun şekilde yeniden yazmak, resim işaretlemenizi basitleştirme yararınıza olur. <picture> işaretlemesi, çok sayıda kaynakla birlikte oldukça uzun olabilir. Aşağıda, WebP alternatifleri sunabilecek bir Apache mod_rewrite kuralı bulunmaktadır:
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 çeşitli içerik türleriyle yayınlanabileceğini anlamasını sağlamak için HTTP Vary yanıt üst bilgisini ayarlamanız gerekir:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
Yukarıdaki yeniden yazma kuralı, istenen JPEG veya PNG resminin WebP sürümünü arar. Bir WebP alternatifi bulunursa uygun Content-Type başlığıyla yayınlanır. Bu, otomatik WebP desteğiyle resim işaretlemeyi aşağıdakine benzer şekilde kullanmanıza olanak tanır:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
WebP kullanımını doğrulayın
Sitenizdeki tüm resimlerin WebP kullanılarak sunulduğunu doğrulamak için Lighthouse kullanılabilir. Lighthouse Performans Denetimi'ni (Lighthouse > Seçenekler > Performans) çalıştırın ve Resimleri yeni nesil biçimlerde sunma denetiminin sonuçlarını bulun. Lighthouse, WebP'de sunulmayan tüm görüntüleri listeler.