Görseller güzel bir web sitesi tasarlamanın hayati bir bileşeni olduğundan, tasarımcıların ve site sahiplerinin takip etmesi gereken önemli sorulardan biri “WebP Nedir?” sorusudur.
Yüksek çözünürlüklü mobil ekranların ortaya çıkmasıyla görsel çözünürlüğün arttırılması, daha büyük dosya boyutlarına neden oldu ve daha yüksek depolama gereksinimleri gerekli oldu.
Ziyaretçiler açısından; dosya boyutundaki bu artış, doğrudan artan bant genişliği tüketimine dönüşür, tarayıcıda yavaş işlemeye neden olabilir ve kullanıcı deneyimini tehlikeye atabilir. Bu, tahmin edebileceğiniz gibi daha düşük arama motoru sıralamalarına neden olabilir.
Aslında, görüntü boyutlarındaki küçük iyileştirmelerin bile site performansı üzerinde önemli etkileri olabilir. Yani; Görsellerinizin boyutunu küçültmenin yollarını bulabilirseniz sitenizi hızlandırabilirsiniz.
WebP'nin Özellikleri
Görüntüleri kaydetmek için kullanılan en yaygın dosya türleri PNG, JPEG (veya JPG) ve GIF'dir. Yaklaşık on yıl önce Google tarafından tasarlanan WebP; PNG ve JPEG'den daha üstün olan web odaklı bir seçenek sağlamak amacıyla oluşturulmuştur.
- JPEG'ler, çok sayıda renge sahip son derece ayrıntılı görüntüler içindir, bu da onları durağan görüntüler için mükemmel yapan şeydir. Ancak, dosyaları genellikle çok büyüktür ve sıkıştırmalar kalitelerini etkileyebilir.
- PNG'ler; Logolar veya arayüz resimleri gibi çok fazla veri içermeyen resimler için idealdir. Sıkıştırıldıklarında kaliteyi korurlar ve şeffaflığı desteklerler ancak fotoğraflar için kullanışlı değildirler.
- GIF'ler ise animasyonlar için işlevseldir, ancak statik görüntüleri kaydetmek için de verimli değildir.
WebP, hem "kayıplı" (Kayıplı WepB) hem de "kayıpsız" (Kayıpsız WepB) sıkıştırma seçenekleri sunan .webp dosya uzantısını kullanır. İkincisi daha fazla veriyi korurken, birincisi sonuçta ortaya çıkan dosya boyutlarını daha da azaltır.
Kayıplı ve kayıpsız sıkıştırmayı işleyebilen WebP; Ayrıca animasyonu ve kayıpsız şeffaflığı, yani alfa kanallı PNG'yi destekler.
WebP'nin en önemli özelliğinin kalitede gözle görülür bir düşüş olmadan dosya boyutunu küçültmesi olduğunu söyleyebiliriz. WebP dosyalarının JPG eşdeğerlerine göre ne kadar az yer kapladığına ilişkin Google açıklamaları, yüzde 25 ile 34 arasında rakamlar veriyor ve WebP, kayıpsız görüntülerin PNG'lere kıyasla %26 daha küçük olduğunu bildiriyor. Bu nedenle Google PageSpeed Insights, tavsiyelerinde WebP görsellerinin kullanımına karşı uyarıda bulunuyor.
Aşağıdaki karşılaştırma için ölçeklendirilmiş JPEG ve WebP görüntüleri Google'dan örneklerdir. İlgili galeriyi üzerine tıklayarak görüntüleyebilirsiniz.
Kayıplı WebP nedir?
Kayıplı sıkıştırma, görüntünün çıplak gözle fark edilmeyen kısımlarını veya baytlarını kaldırarak görüntü boyutunu küçültmenin bir yoludur. En popüler kayıplı görüntü formatı JPG'dir. Kayıplı biçim, orijinal görüntü kalitesine geri yüklenemez.
Kayıplı WebP sıkıştırması ile WebP, dosya boyutunu küçültmek için "tahmini kodlama" kullanır, yani değerleri tahmin etmek için bir görüntüdeki komşu piksellerin değerlerine bakar, ardından farkı kodlar. Bu, VP8 anahtar kare kodlamasını temel alır.
Kayıpsız 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 görüntü boyutunu içeren orijinal formata geri döndürülebilir.
Kayıpsız WebP ise Google WebP ekibi tarafından geliştirildi ve kayıpsız WebP'den çok daha karmaşık yöntemler kullanıyor.
Kayıpsız WebP, görüntüyü birkaç farklı teknik kullanarak dönüştürmeye dayanır. Daha sonra dönüşüm parametreleri ve dönüştürülmüş görüntü verileri üzerinde entropi kodlaması yapılır. Görüntüye uygulanan dönüşümler, piksellerin uzamsal tahmini, renk uzayı dönüşümü, yerel olarak oluşturulan paletlerin kullanılması, birden çok pikselin tek bir pikselde paketlenmesi ve alfa değiştirmeyi içerir.
Alpha ile Lossy Webp nedir?
WebP alfa, görüntüleri piksel başına düşük bit ile kodlar ve bu tür görüntülerin boyutunu küçültmek için verimli bir yol sağlar. Alfa kanalının kayıpsız sıkıştırılması, kayıplı WebP kodlamasına göre yalnızca %22 bayt ekler.
Google verilerine göre şeffaf PNG; Kayıplı+ alfa WebP ile değiştirmek, boyut olarak ortalama %60-70 tasarruf sağlar.
Animasyonlu WebP
GIF yalnızca kayıpsız sıkıştırmayı destekler. WebP'nin kayıplı sıkıştırma teknikleri, gerçek videolardan oluşturulan hareketli görüntüler için çok uygundur.
Google verilerine göre; Kayıplı WebP'lere dönüştürülen animasyonlu GIF'ler %64 daha küçüktür ve kayıpsız WebP'ler %19 daha küçüktür. Bu özellikle mobil ağlarda önemlidir. Öte yandan, Animasyonlu WebP, GIF'den 0,57 kat daha fazla toplam kod çözme süresine sahiptir, bu da kaydırma sırasında daha az titreşim 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 animasyonlu WebP için bazı dezavantajlar vardır.
WebP'yi Destekleyen Tarayıcılar
Site performansını iyileştirmek isteyenler, mevcut görüntülerden kolayca optimize edilmiş WebP alternatifleri oluşturabilir ve 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şte belirttiğimiz gibi dosya boyutlarındaki artıştan dolayı siteniz o kadar yavaşlayabilir. Web sitelerinin hızlı yüklenmesi inanılmaz derecede önemlidir çünkü hem Google yavaş yüklenen sayfaları sevmez hem de yavaş hızlar ziyaretçileri uzaklaştırır. WebP, performansa katkıda bulunarak bu sorunu önleyebilir.
Görüntü dosyalarını sıkıştırmak ve küçültmek onları daha kullanışlı hale getirir, ancak çoğu zaman 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 dosyanın türü fazlalığını etkileyebilir.
- Bu, WebP formatında kaydedilen görüntülerin aynı kalitedeki JPEG ve PNG'lerden önemli ölçüde daha küçük hale getirilebileceği anlamına gelir.
- Ayrıca WebP, hem kayıplı hem de kayıpsız modları destekler ve JPEG veya PNG'den farklı olarak animasyonu destekler.
- Logolar için işlevsel olan şeffaflığı desteklemesi de dikkat çekicidir. JPEG'ler şeffaflık sunmaz, ancak kayıplı WebP görüntüleri sunar.
WebP'nin Eksileri
WebP'nin neden daha fazla insan tarafından kullanılmadığını anlamak için gözümüzü bazı dezavantajlara çevirmemiz gerekiyor. Birincil dezavantaj, WebP görüntülerinin tüm tarayıcılar tarafından desteklenmemesi, ancak artan sayıda tarayıcının desteklemesidir.
Ayrıca; WebP'nin dezavantajları, düşük kaliteli GIF animasyonlarında her zaman iyi performans göstermemesi ve düşük kaliteli ayarlarla kayıplı modda sıkıştırıldığında düşük kalite sunmasıdır.
WordPress'te WebP'yi Kullanma
Tıpkı tarayıcılar, bazı web sitesi kurucuları ve içerik yönetim sistemleri (CMS) gibi; WebP biçimini desteklemez.
WordPress ayrıca varsayılan olarak WebP görüntülerini desteklemez, ancak bazı eklentilerle WordPress sitenizde WebP biçimini kullanmak mümkündür.
WebP alternatiflerini doğrudan WordPress'e yüklemek yerine, orijinal görüntülerinizi WebP formatına dönüştüren ve bir ziyaretçinin tarayıcısı WebP'yi desteklemiyorsa orijinal görüntüyü yedek olarak sunan ShortPixel, Imagify, Optimole WordPress eklentilerini deneyebilirsiniz.
Yorum Yapabilirsiniz.
E-posta mailiniz gizli kalacaktır.*