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, sayfa boyutlarını küçültür ve performansı artırır.

WebP, JPEG, PNG ve GIF resimlerinin mükemmel bir alternatifidir. Buna ek olarak 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, resim kalitesinin düşmesi pahasına dosya boyutunu küçültür.

Resimleri WebP'ye dönüştürme

Kullanıcılar, resimlerini 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 projeler için veya görüntüleri 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ı 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 şekilde oynamakta fayda var. İhtiyaçlarınız için resim kalitesi ile dosya boyutu arasında en doğru dengenin hangisi olduğunu bulun.

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 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 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 yayınlama

Siteniz yalnızca WebP uyumlu tarayıcıları destekliyorsa okumayı bırakabilirsiniz. Aksi takdirde, WebP'yi yeni tarayıcılara, eski tarayıcılara ise yedek bir 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> etiketlerinin tümü (birbirlerine göre nasıl sıralandıklarını da içerir) 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> 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 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ş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 önbelleklerin, resmin farklı içerik türleriyle 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 "Content-Type"
  </IfModule>
</FilesMatch>

Yukarıdaki yeniden yazma kuralı, istenen JPEG veya PNG resimlerinin WebP sürümünü arar. Bir WebP alternatifi bulunursa uygun Content-Type üst bilgisiyle 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.