Bu konu neden önemli?
WebP resimleri, JPEG ve PNG eşdeğerlerinden daha küçüktür (genellikle %25-35'lik bir küçülmeyi sürdürecek. Bu, sayfa boyutlarını küçültür performansı artırır.
- YouTube, WebP küçük resimlerine geçişin %10 ile sonuçlandığını tespit etti. daha hızlı sayfa yüklemeleri için kullanılır.
- Facebook deneyimi Dosya boyutunda JPEG'lerde% 25-35, PNG'lerde dosya boyutunda% 80 tasarruf kullanmaya başladılar.
WebP, JPEG, PNG ve GIF resimlerin yerine 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 yok kayboldu. Kayıplı sıkıştırma, dosya boyutunu küçültür, ancak bunun pahasına Bu da resim kalitesini düşürüyor.
Resimleri WebP'ye dönüştürün
Kullanıcılar, resimlerini dönüştürmek için genellikle aşağıdaki yaklaşımlardan birini kullanır webP'ye: cwebp komut satırı aracı veya Imagemin WebP eklentisi (npm) paketi) ekleyin. Projenizde derleme kodu kullanılıyorsa Imagemin WebP eklentisi genellikle en iyi seçimdir. komut dosyaları veya araçlar (ör. Webpack veya Gulp) oluşturabilirsiniz. KSA iyi bir seçenektir. yalnızca bir kez dönüştürmeniz gerektiğinde veya basit projelerde kullanabilirsiniz.
Resimleri WebP'ye dönüştürdüğünüzde, çok çeşitli ayarları içerir. Ancak çoğu kullanıcı için, sıkıştırmadan önce önemli olan kalite ayarıdır. 0'dan bir kalite seviyesi belirtebilirsiniz. (en kötü) - 100 (en iyi). Bunlarla uğraşmaya değer, resim kalitesi ile dosya boyutu arasında doğru dengeyi bulup gerekiyor.
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 seviyesi 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ürün:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Imagemin'i kullan
Imagemin WebP eklentisi tek başına veya en sevdiğiniz derleme aracıyla kullanılabilir. (Webpack/Gulp/Grunt/etc.). Bu, genellikle bir web sitesine yaklaşık 10 satır kod eklemeyi derleme komut dosyası veya derleme aracınızın yapılandırma dosyası olabilir. Şu örneklerde bunu nasıl yapabileceğinize dair Web paketi, Gulp ve Grunt.
Bu derleme araçlarından birini kullanmıyorsanız Imagemin'i tek başına
Düğüm komut dosyası. Bu komut dosyası images
dizinindeki dosyaları dönüştürür ve
bunları compressed_images
dizinine kaydedebileceksiniz.
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ınlama
Siteniz yalnızca WebP uyumluysa tarayıcılarda okumayı durdurabilirsiniz. Aksi halde Yeni tarayıcılara WebP, eski tarayıcılara ise yedek resim sunar:
Ö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>
İlgili içeriği oluşturmak için kullanılan
<picture>
<source>
,
ve <img>
etiketlerinin tamamı, bunların birbirlerine göre nasıl sıralandıklarını da
etkileşime geçtiğini değerlendirir.
<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ğını belirtiyor.
Tarayıcı, desteklediği biçimdeki ilk listelenen kaynağı kullanır. Tarayıcı, <source>
etiketlerinde listelenen biçimlerden hiçbirini desteklemiyorsa <img>
etiketi tarafından belirtilen resmi yüklemeye geri döner.
<img>
Bu kodun tarayıcılarda çalışmasını sağlayan <img>
etiketidir
<picture>
etiketini desteklemeyenler için geçerlidir.
Bir tarayıcı <picture>
etiketini desteklemiyorsa
desteklemediği etiketleri yoksayabilirsiniz. Yani, o kişi yalnızca "the"
<img src="flower.jpg" alt="">
etiketini ekler ve bu resmi yükler.
HTTP Accept
başlığı okunuyor
İstekleri yeniden yazmanıza izin veren bir uygulama arka ucunuz veya web sunucunuz varsa HTTP Accept
üst bilgisinin değerini okuyabilirsiniz. Bu değer, desteklenen alternatif resim biçimlerini gösterir:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Bu istek başlığını okumak ve yanıtını içeriğine göre yeniden yazmak, resim işaretlemenizi basitleştirme avantajına sahiptir. <picture>
işaretlemesi, birçok kaynakta oldukça uzun sürebilir. 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 yolu seçerseniz önbelleklerin, resmin çeşitli içerik türleriyle sunulabileceğ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 herhangi bir JPEG veya PNG resminin WebP sürümünü arar. Bir WebP alternatifi bulunursa uygun Content-Type
başlığıyla sunulur. Bu, otomatik WebP desteğiyle aşağıdakine benzer bir resim işaretleme 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ğrulama
Lighthouse, sitenizdeki tüm resimlerin sunulduğunu doğrulamak için kullanılabilir yardımcı olabilir. Lighthouse Performans Denetimi'ni çalıştırın (Lighthouse > Seçenekler > ) bulun ve Resimleri yeni nesilde sunun biçimleri denetiminde daha fazla bilgi edinin. Lighthouse, sunulmayan tüm resimleri listeler WebP