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’nin Özellikleri

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örsellerin 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.

---------------------------------------------------------------
---------------------------------------------------------------

---------------------------------------------------------------

---------------------------------------------------------------

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 [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] 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.

[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...], ş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’nin Artıları

---------------------------------------------------------------
---------------------------------------------------------------

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.

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ı

---------------------------------------------------------------
---------------------------------------------------------------

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.


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.

Kaynak : [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]