WebP’ye Geçiş Yaparak Kullanıcı Deneyimini İyileştirin

2010 yılından beri hayatımızda olan WebP formatı son zamanlarda daha çok ses getirmeye başlamıştır. Bunun sebeplerine bakacak olursak; Google’ın 2018 yılındaki açıklaması ile site hızının bir sıralama faktörü olmasından sonra site hızı ve site performansı SEO’nun önemli maddeleri sıralamasına girdi.
Konu görsel optimizasyon olunca, WebP formatı hem SEO ajansı hem de markalar tarafında dikkatleri her geçen gün daha çok çekmeye başladı aynı doğrultuda önemi de artarak devam etti. Bugün site hızını ve performansını önemseyen herkes için WebP formatının neredeyse bir zorunluluk haline geldiğini rahatlıkla söyleyebiliriz.

Site performansınızı analiz etmenizi sağlayan Google Pagespeed Insights aracından tarama yaptığınızda fırsatlar bölümünde sizlere “Resimleri yeni nesil biçimlerde yayınlayın” önerisinde bulunur. Site hızını etkileyen diğer maddeler için Google PageSpeed Insights Nedir adlı blogumuzu okuyabilirsiniz. Peki Google direkt öneride bulunduğu WebP nedir?

WebP Nedir?

WebP, Google tarafından 2010 yılında duyurulmuştur webdeki görseller için yüksek tasarruf, kayıplı ve kayıpsız sıkıştırma sağlayan yeni nesil bir görüntü dosyası biçimidir. Amaç, yüksek boyutlardaki resimleri diğer formatlarla karşılatırıldığında hem görselin kalitesini kullanıcıya fark ettirmeyecek seviyede koruyor hem de görselleri boyut olarak daha üstün bir şekilde sıkıştırıyor. WebP, saydamlık için alfa kanalı içerir ve bundan dolayı da png görselleri sıkıştırırken şeffaf arka planı koruyabilmektir.

WebP Kullanmanın Avantajları Nelerdir?

• Görüntüler site hızı açısından çok önemlidir ve optimize edilmelidir. WebP hem Google’ın kendi desteklediği bir format olmasından hem de daha fazla tasarruf sağladığından dolayı çoğunluğun tercihidir.
• WebP görseli sıkıştırdığımızda diğer formatlara göre daha az görüntü bozulur.
• Her türlü görsel formatı WebP formatına dönüştürülebilir.

WebP Destekleyen Tarayıcılar

• ​Google Chrome
• Opera
• Microsoft Edge
• Mozilla Firefox

Yukarıda belirtilen tarayıcılar desteklenmektedir. Peki bu bir sorun mu? Evet buna sorun diyebiliriz ama çözümü basit olan bir sorun.

WebP Formatını Desteklemeyen Tarayıcılarda Ne Yapmalıyız?

WebP formatını desteklemeyen tarayıcılarda görsellerimizi göstermek için 2-3 farklı yollar var bunlardan biri direkt statik bir şekilde HTML kod yazılması tabi ki bu statik olduğu için sitedeki bütün resimler için tek tek uğraşmak gerekiyor.

Örnek HTML Kodu:

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

WordPress altyapı kullanıyorsanız bu tarafta elinizde birçok seçenek var;

1. Webp Express
2. EWWW Image Optimizer
3. WP Smush Pro

gibi benzer wordpress eklentileri sizin JPG veya PNG olarak eklediğiniz görselleri uyumlu tarayıcılarda WebP olarak gösterir. WebP desteklemeyen tarayıcılarda ise tarayıcının desteklediği format da görsellerinizi gösterir.

References:

https://inboundjunction.com/why-webp-is-critical-to-seo

https://www.theegg.com/seo/apac/image-seo-what-is-webp-and-how-to-implement-it/