WebP biçimine giriş

WebP, Google tarafından geliştirilen yeni bir görüntü biçimidir. Kayıplı sıkıştırmayı, kayıpsız sıkıştırmayı ve saydamlığı destekler; sıkıştırılmış dosyaları JPEG, PNG gibi biçimlerdekinden daha küçüktür. Böylece bant genişliğinden tasarruf sağlar, sayfa yükleme süresini kısaltır ve kullanıcıların veri tüketimini azaltır.

Android ve iOS uygulamaları, Google'ın sağladığı kod çözme kütüphanesini ekleyerek WebP biçimini kolayca destekleyebilir. Ancak web üzerinde WebP desteği henüz çok yaygın değil; şu kaynağa göre Can I Use verileri，şu anda yalnızca Chrome ve Opera tarayıcıları ile Android’in WebView bileşeni WebP’yi destekliyor. Peki WebP görsellerinin bu kadar çok avantajı varken onları web sayfalarında kullanabilir miyiz? Evet. Bu makalede bu konuyu ele alacağız.

Mevcut görselleri WebP biçimine dönüştürme

WebP biçimini kullanmak için sitenizde kullanılan tüm görsellerin WebP sürümlerini oluşturmanız gerekir; bir CDN sağlayıcısı kullanıyorsanız, genellikle WebP biçimine dönüştürme seçeneği sunarlar。Örneğin Upyun：

Bu yapılandırmayı ekledikten sonra，görsel URL'sine ilgili son eki ekleyerek，kaynakların WebP biçimindeki sürümlerini kullanabiliriz。

Görsel biçimlerini topluca dönüştürmek için webpack ve gulp eklentilerini de kullanabilirsiniz. Burada ayrıntısına girilmeyecektir.

Tarayıcıda WebP biçimini kullanma

Tüm tarayıcılar WebP biçimini desteklemediği için iki yaklaşımımız var: WebP biçimini yalnızca onu destekleyen tarayıcılarda kullanmak veya WebP biçimini desteklemeyen tarayıcıların da onu desteklemesini sağlamak.

Birinci yöntem： <picture>Etiketler

<picture>HTML5'teki yeni bir etikettir, şuna benzer<video>Ayrıca kaynakları birden fazla biçimde belirtebilir; tarayıcı desteklediği biçimi seçerek yükler.

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

Tarayıcı WebP biçimini destekliyorsa yükleyeceği image.webp，aksi takdirde yüklenir image.jpg。

Tarayıcı desteklemese bile<picture>etiketi, resim yine normal şekilde görüntülenir, ancak CSS doğru biçimde seçemeyebilir: picture öğeleri。Örneğin IE8'de, aşağıdaki CSS çalışmaz：

.picture img {  width: 100px;  height: 100px;
}

Ancak görsele şu şekilde stil yazabilirsiniz:

.image {  width: 100px;  height: 100px;
}

Tarayıcı WebP biçimindeki görselleri kullansa bile sonunda yine uygulanacak olan img öğenin stili.

Ancak kullanıldığı sürece html5shiv，eski tarayıcıların bu etiketi desteklemesini sağlar; böylece CSS seçicileri normal şekilde kullanılabilir.

Bu yöntem en basitidir, ancak CSS içindeki görsellere（örneğin arka planlara）uygulanamaz.

İkinci yöntem：Görselin URL'sini JS kullanarak değiştirmek.

Birçok sayfamızda görseller için “tembel yükleme” kullanılır——genellikle görselin URL'si şuraya yerleştirilir: img öğesinin özel bir özniteliğine, ardından uygun zamanda JS kullanarak URL'yi şuna atayın：src özelliği. Benzer bir ilkeyle, tarayıcının WebP biçimini destekleyip desteklemediğine göre img öğeye farklı … kazandırır src değeri.

Öncelikle tarayıcının WebP biçimini destekleyip desteklemediğini JS ile belirlememiz gerekiyor. Bunun için tarayıcıya WebP biçiminde bir resim verip doğru görüntüleyip görüntüleyemediğine bakarız. Bu yöntem asenkron olduğundan sonraki işlemleri geri çağırma işlevinin içine yazmamız gerekir. Sonucu şurada saklayabiliriz: localStorage içine, böylece daha sonra yeniden kontrol etmeye gerek kalmaz。

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

Ardından WebP desteğinin bulunup bulunmamasına göre ilgili src değerini değiştirmek için aşağıdaki kodu kullanın.

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

Bu yöntemin avantajı, mevcut tembel yükleme işlevleriyle birleştirilebilmesidir. Ayrıca JS kullanarak CSS içindeki görüntüleri de（arka plan görüntüleri gibi）işleyebiliriz.

Üçüncü yöntem: WebP görsellerini JS ile çözmek

WebP'nin kod çözücüsü açık kaynak olduğuna göre, bunu JS ile uygulamak mümkün mü? Elbette mümkün,Birisi JS kullanarak bir WebP kod çözücüsü yazmış。Bu JS kütüphanesini eklemek, tüm WebP görsellerinin JS ile çözülüp şu biçime dönüştürülmesini sağlar: base64，ardından özgün URL'yi değiştirin; böylece başlangıçta WebP'yi desteklemeyen tarayıcılar da WebP'yi düzgün görüntüleyebilir. Bu kütüphanenin kullanımı çok basittir, web sayfasındaki açıklamaya bakmanız yeterlidir.

Bu yöntemin dezavantajı, JS'nin WebP görüntüsünü çözmek için src içindeki URL'ye burada asenkron bir istek göndermesi gerekmesidir（ancak görüntü daha önce bir kez indirildiği için doğrudan önbellek kullanılır）；ayrıca JS ile çözümleme görece yavaştır ve performansı etkiler; görüntünün görünmesi biraz zaman alabilir.

Yukarıda, tarayıcıda WebP görsellerini kullanmanın birkaç yöntemi yer alıyor; kendi koşullarınıza uygun olanı seçebilirsiniz. Uygulamalarımızda WebP biçimine geçtikten sonra görsel boyutları genel olarak 1/3'ten fazla küçüldü; bu hem yüklemeyi hızlandırdı hem de kullanıcıların veri tüketimini azalttı. Bu biçimi şimdiden kullanmaya başlamanızı önemle öneriyoruz.