WebP Formatı ile Web Sitenizin Görsel Performansını Artırın

Web sitenizin hızını artırmak ve performansını optimize etmek için resimlerinizi modern formatlarda sunmak büyük bir fark yaratabilir. WebP formatı, hem kayıplı hem de kayıpsız sıkıştırmayı destekleyen modern bir görüntü formatıdır ve JPEG, PNG gibi daha eski formatlara göre önemli ölçüde daha küçük dosya boyutları sunar. CDN.com.tr’nin sunduğu resim optimizasyon özelliği, resimlerinizi otomatik olarak WebP formatına dönüştürür ve dosya adının sonuna .webp ekleyerek çağırmanızı sağlar. Ancak, her tarayıcı WebP formatını desteklemez. Bu durumda, web sitenizin tarayıcı desteğini kontrol etmesi gerekir. İşte bu sorunu nasıl çözebileceğinizi adım adım anlatacağız.

WebP Desteğini Kontrol Etmenin Önemi

WebP formatını destekleyen tarayıcılara bu formatta resim sunmak, web sitenizin yükleme sürelerini önemli ölçüde kısaltır. Ancak, WebP’yi desteklemeyen tarayıcılar için alternatif bir format (genellikle JPEG veya PNG) sunmak gereklidir. Bu sayede, tüm kullanıcılarınız en iyi görüntü deneyimini yaşayabilirler.

Tarayıcı Desteğini Kontrol Etme Yöntemleri

1. JavaScript ile Tarayıcı Desteğini Kontrol Etme

JavaScript kullanarak tarayıcı desteğini kontrol etmek ve uygun görüntü formatını yüklemek oldukça yaygın bir yöntemdir. İşte temel bir kontrol örneği:

function supportsWebP(callback) {
  var webP = new Image();
  webP.onload = webP.onerror = function () {
    callback(webP.height === 2);
  };
  webP.src =       "data:image/webp;base64,UklGRhYAAABXRUJQVlA4TAYAAAAvAAAAAAfQ//73v/+BiOh/AAA=";
}

Bu fonksiyon, tarayıcının WebP formatını destekleyip desteklemediğini kontrol eder ve sonuca göre uygun aksiyonu alır.

2. HTML5 Picture Element Kullanma

HTML5 picture elementi, tarayıcı desteğine göre uygun resim formatını sunmanın modern ve etkili bir yoludur. Tarayıcı WebP’yi destekliyorsa WebP formatındaki resim yüklenir, desteklemiyorsa alternatif format kullanılır.

<picture> 
  <source srcset="image/test-img.webp" type="image/webp"> 
  <img src="image/test-img.jpeg" alt="insert alt text here"> 
</picture>

Bu yöntemle, tarayıcı otomatik olarak desteklediği formatı seçer ve yükler.

CDN.com.tr ile Resim Optimizasyonu

CDN.com.tr’nin sunduğu resim optimizasyon özelliği sayesinde, resimlerinizi otomatik olarak WebP formatına dönüştürebilir ve dosya adının sonuna .webp ekleyerek çağırabilirsiniz. Bu işlem oldukça basittir ve performansınızı artırır.

Adım 1: CDN.com.tr Paneline Giriş Yapın

Öncelikle, CDN.com.tr paneline giriş yaparak web sitenizi tanımlayın ve ayarlarını yapılandırın.

Adım 2: Resim Optimizasyonunu Etkinleştirin

CDN yönetim arayüzünde resim optimizasyon seçeneğini bulun ve etkinleştirin. Bu özellik sayesinde, yüklediğiniz resimler otomatik olarak WebP formatına dönüştürülecektir.

Adım 3: Resimleri WebP Olarak Çağırın

Web sitenizdeki resim çağrılarını WebP formatında yapmak için, resim dosya adlarının sonuna .webp ekleyin. Ancak, tarayıcı desteğini kontrol etmeyi unutmayın. Yukarıda bahsedilen yöntemleri kullanarak, destekleyen tarayıcılara WebP, desteklemeyenlere alternatif format sunabilirsiniz.

Sonuç

WebP formatı, web sitenizin hızını ve performansını optimize etmek için mükemmel bir araçtır. CDN.com.tr’nin resim optimizasyon hizmeti ile WebP formatını kolayca kullanabilirsiniz. Ancak, her tarayıcı WebP formatını desteklemediği için tarayıcı desteğini kontrol etmek önemlidir. JavaScript ve HTML5 picture elementi gibi yöntemlerle bu kontrolü yaparak, tüm kullanıcılarınıza en iyi görüntü deneyimini sunabilirsiniz.