WebP resimlerini kullan

Katie Hempenius
Katie Hempenius

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.

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