WebP resimlerini kullan

Katie Hempenius
Katie Hempenius
X

Bu konu neden önemli?

WebP resimleri, JPEG ve PNG'ye kıyasla daha küçüktür. Genellikle dosya boyutunda% 25-35 oranında bir azalma olur. Bu sayede sayfa boyutları azalır ve performans artar.

WebP, JPEG, PNG ve GIF resimlerinin mükemmel bir alternatifidir. Ayrıca WebP hem kayıpsız hem de kayıplı sıkıştırma sunar. Veri kaybı olmayan sıkıştırma işleminde 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ürme

Kullanıcılar, resimlerini WebP'ye dönüştürmek için genellikle aşağıdaki 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çimdir. Küçük projeler için veya resimleri yalnızca bir kez dönüştürmeniz gerekiyorsa KSA iyi bir seçimdir.

Resimleri WebP'ye dönüştürdüğünüzde çok çeşitli sıkıştırma ayarları belirleyebilirsiniz. Ancak çoğu kullanıcının dikkat etmesi gereken tek şey kalite ayarıdır. 0 (en kötü) ile 100 (en iyi) arasında bir kalite seviyesi belirtebilirsiniz. Bu seçeneklerle oynayarak ihtiyaçlarınıza en uygun resim kalitesi ve dosya boyutu dengesini bulun.

cwebp hareketini kullanın

cwebp'ın 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 kullanma

Imagemin WebP eklentisi tek başına veya en sevdiğiniz derleme aracıyla (Webpack/Gulp/Grunt/vb.) kullanılabilir. Bu işlem genellikle bir derleme komut dosyasına veya derleme aracınızın yapılandırma dosyasına yaklaşık 10 satır kod eklemeyi içerir. Webpack, Gulp ve Grunt için bunu nasıl yapacağınıza dair örnekler aşağıda verilmiştir.

Bu derleme araçlarından birini kullanmıyorsanız Imagemin'i Node 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 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 yayınlayın:

Ö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 nasıl sıralandığı da dahil) bu nihai sonuca ulaşmak için etkileşimde bulunur.

<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 bir 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 geçer.

<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 üst bilgisini okuma

İstekleri yeniden yazmanıza olanak tanıyan bir uygulama arka ucunuz veya web sunucunuz varsa hangi alternatif resim biçimlerinin desteklendiğini belirten HTTP Accept başlığının değerini okuyabilirsiniz:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Bu istek üstbilgisini okumak ve yanıtı içeriğine göre yeniden yazmak, resim işaretlemenizi basitleştirme avantajına sahiptir. <picture> işaretleme, birçok kaynakla oldukça uzun olabilir. Aşağıda, WebP alternatifleri yayınlayabilen 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 önbellekleri, resmin Accept başlığına bağlı olarak farklı şekilde sunulabileceğini anlayacak şekilde 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. Bir WebP alternatifi bulunursa uygun Content-Type üstbilgisiyle yayınlanır. Bu sayede, otomatik WebP desteğiyle aşağıdakine benzer resim işaretlemelerini 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 yayınlandığını 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ınlama denetiminin sonuçlarını arayın. Lighthouse, WebP biçiminde yayınlanmayan tüm resimleri listeler.