WebP Nedir?

Görseller, güzel bir web sitesi tasarlamanın hayati bir bileşeni olduğundan tasarımcıların ve site sahiplerinin peşine düşmesi gereken önemli sorulardan biri “WebP nedir?” olmalıdır.

Yüksek çözünürlüklü mobil ekranların ortaya çıkışıyla görsel çözünürlüğün artırılması daha büyük dosya boyutlarına sebep olmuş ve daha yüksek depolama gereksinimlerine ihtiyaç duyulmuştur.

Ziyaretçiler açısından; dosya boyutundaki bu artış, doğrudan artan bant genişliği tüketimi anlamına gelir, tarayıcıda yavaş işleme yol açabilir ve kullanıcı deneyimini sıkıntıya sokabilir. Bu da tahmin edeceğiniz üzere düşük arama motoru sıralamalarıyla sonuçlanabilir.

Aslında görsel boyutlarında küçük iyileştirmeler bile site performansında önemli etkilere sebep olur. Kısacası; görsellerinizin boyutunu küçültmenin yollarını bulabilirseniz, sitenizi hızlandırabilir ve kullanıcı deneyimini iyileştirebilirsiniz.

WebP; webdeki görselleri mevcut görsel formatlarına benzer bir kalite seviyesinde ancak daha küçük bir dosya boyutunda görüntülememize izin veren Google tarafından tasarlanmış modern bir görüntü formatıdır.

WebP’nin Özellikleri

WebP Nedir? WebP'nin Özellikleri
Kayıplı ve kayıpsız sıkıştırmanın üstesinden gelebilen WebP; animasyonu ve kayıpsız şeffaflığı, yani alfa kanallı PNG’yi de destekler.

Görselleri kaydetmek için kullanılan dosya türlerinin en bilinenleri PNG, JPEG (veya JPG) ve GIF’dir. Google’ın on yıl kadar önce tasarladığı WebP; PNG ve JPEG’den daha üstün web odaklı bir seçenek sunma amacıyla ortaya çıkmıştır. WebP; kaliteyi etkilemeden PNG, JPEG veya GIF dosya boyutlarını önemli ölçüde azaltabilir.

JPEG’ler, çok sayıda renk içeren son derece ayrıntılı görüntüler içindir ve bu da onları fotoğraflar için mükemmel yapan özelliktir. Ancak, dosyaları genellikle çok büyüktür ve sıkıştırmalarda kaliteleri etkilenebilir.

PNG’ler; logo veya arayüz görselleri gibi çok fazla veri içermeyen görüntüler için idealdir. Sıkıştırıldıklarında kaliteyi korurlar ve şeffaflığı desteklerler ancak fotoğraflar için kullanışlı değildir.

GIF’ler ise animasyonlar için işlevseldir ancak onlar da statik görüntüleri kaydetmek için verimli değildir.

WebP .webp dosya uzantısını kullanır, hem “kayıplı” (Lossy WepB) hem de “kayıpsız” (Lossless WepB) sıkıştırma seçenekleri sunar. İkincisi daha fazla veriyi korurken, birincisi elde edilen dosya boyutlarını daha da küçültür.

Kayıplı ve kayıpsız sıkıştırmanın üstesinden gelebilen WebP; animasyonu ve kayıpsız şeffaflığı, yani alfa kanallı PNG’yi de destekler.

WebP’nin en önemli özelliğinin kalitede fark edilir bir düşüş olmaksızın dosya boyutunun küçültülmesi olduğunu söyleyebiliriz. WebP dosyalarının JPG eşdeğerlerinden ne kadar az yer kapladığına dair Google açıklamaları yüzde 25 ila 34 arasında rakamlar sunmakta ve WebP kayıpsız görselllerin boyutunun PNG’lere kıyasla % 26 daha küçük olduğunu bildirmektedir. Bu nedenle de Google PageSpeed ​​Insights önerilerinde, WebP görsellerinin kullanılmasına dair uyarılarda bulunur.

Aşağıdaki karşılaştırma için ölçeklendirilmiş JPEG ve WebP görselleri Google’ın sunduğu örneklerdendir. Üzerine tıklayarak ilgili galeriyi görüntüleyebilirsiniz.

Lossy WepB, Lossless WepB, kayıplı WepB, Kayıpsız WepB
JPEG dosya boyutu: 86.25 KB
Lossy WepB, Lossless WepB, kayıplı WepB, Kayıpsız WepB
WebP dosya boyutu: 59.18 KB

Kayıplı (Lossy) WebP Nedir?

Kayıplı sıkıştırma, görüntünün çıplak gözle fark edilmeyen bazı kısımlarını veya baytlarını ortadan kaldırarak görüntü boyutunu küçültmenin bir yoludur. En popüler kayıplı görüntü formatı JPG’dir. Kayıplı format, orijinal görüntü kalitesine geri döndürülemez.

Kayıplı (lossy) WebP sıkıştırmasıyla WebP, dosya boyutunu küçültmek için “tahmini kodlama” (predictive coding) kullanır yani değerleri tahmin etmek için bir görseldeki komşu piksellerin değerlerine bakar, ardından yalnızca farkı kodlar. Bu, VP8 key frame kodlamasına dayanır.

Kayıpsız (Lossless) WebP Nedir?

PNG, TIFF ve GIF; görüntünün kalitesini kaybetmeden görüntü boyutunu küçültmenin bir yolunu sunan kayıpsız görüntü formatlarıdır. Kayıpsız görüntü formatı, orijinal resim boyutunun içinde bulunduğu orijinal formata geri döndürülebilir.

Kayıpsız (Lossless) WebP ise Google WebP ekibi tarafından geliştirilmiştir ve kayıplı WebP’den çok daha karmaşık yöntemler kullanır.

Kayıpsız WebP, görüntünün birkaç farklı teknik kullanılarak dönüştürülmesine dayanır. Ardından, dönüşüm parametreleri ve dönüştürülen görüntü verileri üzerinde entropi kodlaması gerçekleştirilir. Görüntüye uygulanan dönüştürmeler, piksellerin uzamsal tahminini, renk alanı dönüşümü, yerel olarak ortaya çıkan paletleri kullanma, birden çok pikseli tek bir pikselde paketleme ve alfa değiştirmeyi içerir.

Alpha ile Lossy Webp Nedir?

WebP alpha, piksel başına düşük bit içeren görüntüleri kodlar ve bu tür görüntülerin boyutunu küçültmek için etkili bir yol sağlar. Alfa kanalının kayıpsız sıkıştırması, kayıplı WebP kodlamasına göre yalnızca % 22 bayt ekler.

Google verilerine göre, şeffaf PNG’yi; kayıplı (lossy)+ alfa WebP ile değiştirmek, ortalama olarak % 60-70 boyut tasarrufu sağlar. Bu özellikle simgeler açısından zengin mobil siteler için önemlidir.

Animasyonlu WebP

GIF yalnızca kayıpsız sıkıştırmayı destekler. WebP hem kayıplı hem de kayıpsız sıkıştırmayı destekler; aslında, tek bir animasyon kayıplı ve kayıpsız kareleri birleştirebilir. WebP’nin kayıplı sıkıştırma teknikleri, gerçek videolarından oluşturulan hareketli görüntülere çok uygundur.

Google verilerine göre; kayıplı WebP’lere dönüştürülen animasyonlu GIF’ler % 64, kayıpsız WebP’ler ise % 19 daha küçüktür. Bu özellikle mobil ağlarda önemlidir. Animasyonlu WebP ise GIF’den 0,57 kat daha fazla toplam kod çözme süresine sahiptir, bu da kaydırma sırasında daha az sarsıntı ve CPU kullanımındaki ani artışlardan daha hızlı kurtarma anlamına gelir. Ancak WebP desteğinin, GIF desteği kadar yaygın olmaması gibi bazı dezavantajlar animasyonlu WebP açısından söz konusudur.

WebP’yi Destekleyen Tarayıcılar

Site performansını iyileştirmekle ilgilenenler mevcut görsellerden kolaylıkla optimize edilmiş WebP alternatifleri oluşturarak bunları WebP’yi destekleyen tarayıcılarda sunabilir.

WebP’yi destekleyen tarayıcıları şu şekilde gruplayabiliriz:

Kayıplı WebP

  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)

Kayıplı, Kayıpsız ve Alpha WebP

  • Google Chrome (desktop) 23+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 12.10+
  • Native web browser, Android 4.2+ (JB-MR1)
  • Pale Moon 26+

Animasyonlu WebP

  • Google Chrome
    (desktop, Android) 32+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 19+

WebP’nin Artıları

WebP'nin Artıları, WebP'nin Eksileri
WebP formatında kaydedilen görüntülerin, aynı kalitedeki JPEG ve PNG’lerden önemli ölçüde daha küçük olması sağlanabilir.

Görüntü kalitesi, performans, tarayıcılarla uyumluluk bir görüntü formatı hakkında dikkate alınması gereken üç kritik parametredir:

Sitenize ne kadar çok görsel ve medya eklerseniz, giriş bölümünde de bahsettiğimiz gibi dosya boyutlarının artması nedeniyle siteniz yavaşlayabilir. Web sitelerinin hızlı yüklenmesi inanılmaz derecede önemlidir çünkü hem Google geç yüklenen sayfalardan hoşlanmaz hem de düşük hızlar ziyaretçileri kaçırır. WebP, performansa katkıda bulunarak bu sorunu engelleyebilir.

Görüntü dosyalarının sıkıştırılarak küçültülmesi onları daha kullanışlı hale getirse de genellikle kalite kaybına neden olur. Genel olarak, bir görüntüyü ne kadar çok sıkıştırırsanız, o kadar kötü görünür ancak kullandığınız dosya türü, bunun aşırılığını etkileyebilir.

WebP; JPEG veya PNG dosyalarına kıyasla dosya boyutunda yaklaşık % 25 küçülme sağlayabilir.

Yani WebP formatında kaydedilen görüntülerin, aynı kalitedeki JPEG ve PNG’lerden önemli ölçüde daha küçük olması sağlanabilir.

Ayrıca, WebP’nin hem kayıplı hem de kayıpsız modları desteklemesi ve JPEG veya PNG’den farklı olarak animasyonu desteklemesi en önemli artılarındandır.

Logolar açısından işlevsel olan saydamlığı desteklemesi de dikkat çekicidir. JPEG’ler saydamlık sunmaz, ancak kayıplı WebP görüntüleri sunar.

WebP’nin Eksileri

WebP’nin neden daha fazla kişi tarafından kullanılmadığını anlamak için bazı dezavantajlara gözümü çevirmemiz gerekir. Birincil dezavantajı, WebP görsellerinin tüm tarayıcılar tarafından desteklenmemesidir, ancak destekleyen tarayıcıların sayısı giderek artmaktadır.

Ayrıca; düşük kaliteli GIF animasyonlarında her zaman iyi performans göstermemesi ve kayıplı modda daha düşük kaliteli ayarlarla sıkıştırıldığında düşük kalite sunması WebP’nin eksileri arasında sayılabilir.

WordPress’te WebP Kullanımı

WordPress’te WebP Kullanımı
WordPress, WebP görsellerini varsayılan olarak desteklemez ancak bazı eklentilerle WordPress sitenizde WebP formatını kullanmanız mümkündür.

Tıpkı tarayıcılar gibi, bazı web sitesi oluşturucular ve içerik yönetim sistemleri (CMS); WebP formatını desteklememektedir.

WordPress de WebP görsellerini varsayılan olarak desteklemez ancak bazı eklentilerle WordPress sitenizde WebP formatını kullanmanız mümkündür. Bu eklentiler; ziyaretçinin tarayıcısı destekliyorsa, resimlerinizi otomatik olarak WebP’ye dönüştürür.

WordPress’te WebP Kullanımı

WebP alternatiflerini doğrudan WordPress’e yüklemek yerine, orijinal resimlerinizi WebP formatına dönüştüren ve eğer bir ziyaretçinin tarayıcısı WebP’yi desteklemiyorsa orijinal resmi yedek olarak sunan WordPress eklentilerinden ShortPixel, Imagify, Optimole’i deneyebilirsiniz.

Özet

WebP, Google tarafından geliştirilen ve mevcut resim formatlarına benzer kalitede daha küçük dosya boyutları sunabilen bir resim formatıdır.

Popülerliği artıyor olsa da WebP henüz tüm tarayıcılarda desteklenmemektedir. Bununla birlikte özellikle çok sayıda resim yüklemeniz gereken sitelerde WebP kullanmak verimli olabilir.

Özetle WebP nedir? sorusunu “web sitenizi, sıkıştırılmış PNG’ler veya JPEG’ler kullanmaktan çok daha fazla hızlandırma potansiyeline sahip bir resim dosyası türü” şeklinde yanıtlayabiliriz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bunlar da İlginizi Çekebilir
Devamı
Python Nedir?
İşlerini kısa sürede halletmeyi seven mühendislerin gözdesi Python işletmeniz için neler yapabilir?
Devamı
Dropbox Nedir? Nasıl Kullanılır?
Düzenli olarak dosya paylaşımı yapmak isteyenlere ve belgelerin senkronize edilmesi için güçlü bir araç arayanlara bugün Dropbox'ı anlatıyoruz.