Günlük hayattaki ihtiyaçlarımızın ve beklentilerimizin artması bizim bilgiye daha hızlı daha hızlı erişmek istememize sebep olmaktadır. Tıpkı bunun gibi webde de kullanıcıların aradığı bilgiye olabildiğince hızlı bir şekilde erişmesini sağlamak site sahiplerinin temel görevlerinden biri olması gerekirken, istatistikler de bunu doğrulamaktadır. Kullanıcıların veriye yavaş ulaşması dönüşüm, trafik ve siteye duyulan otoriter imajı sarsabilirken aynı zamanda sitenin satış ve trafiklerinde de kalıcı hasarlar bırakabilir. Tam da bu noktada web sitemizi yavaşlatabilecek her türlü aksiyondan arındırmalı ve bunun düzenli takibini yaparak optimizasyon fırsatları erkenden yakalanmalıdır.
Bu konu hakkında bir web sitesinin yavaşlayabilmesine sebep olan en büyük etkenlerden biri olan sitede kullanılan görsellerin optimizasyonundan bahsedeceğiz.
WebP Nedir?
Webp, ilk olarak Eylül 2010'daki bir Google konferansında duyurulan ve görsellerdeki kaliteyi bozmadan minimum kayıpla yapılan bir sıkıştırma formatıdır.
Bu formatta görseller normal formatlara göre çok daha düşük dosya boyutunda olmalarıyla avantaj sağlamaları ile birlikte aynı zamanda olabildiğince yüksek bir kalitede kullanıcı deneyimi sunmaktadır. Bu tür durumda da giriş açıklamamda belirttiğim gibi bilgiye hızlı erişebilme noktasında dosya boyutlarından ciddi oranda tasarruf edilerek kalite bozulmadan iyi bir site hızı deneyimi sağlanmasına yardımcı olunur.
Yukarıdaki görselde görüleceği üzere %50'ye kadar daha fazla oranda sıkıştırma yapılırken, görsel kalitesinde ise aynı oranda gözle görülebilir bir fark oluşmamaktadır. Genel olarak ortalama %26 daha düşük boyutta görseller elde edilebilir.
WebP formatının kayıplı ve kayıpsız sıkıştırma anlamına gelen WebP Lossy ve WebP Lossless olarak 2 türü bulunmaktadır.
WebP Lossy Nedir?
Kayıplı sıkıştırma anlamına gelen WebP Lossless, görsellerin yüksek seviyede orijinal halleriyle hemen hemen benzer durumda olduğu görüntüler üretir. Bir kayıp yaşanır ancak bu kayıplar görsel üzerinde gözle görülemeyecek düzeyde gerçekleşir. Dosya boyutları kayıpsız sıkıştırmaya oranla daha fazla düşmektedir. WebP Lossy sıkıştırma JPEG formatındaki görsellere göre %25 ile %34 daha düşük boyuta sahiptir.
WebP Lossless Nedir?
Kayıpsız sıkıştırma anlamına gelen WebP Lossless, olabildiğince minimum kayıpla yani genel olarak her pixelin aynı kalacağı görüntüler üretir. Kayıpsız sıkıştırma için tüm pixelleri tam eşleme yaparak önceki görüntü parçalarına bakar ve birebir eşleştirerek kaliteden ödün vermeden sıkıştırma uygular. Fakat aşağıdaki görselde de görüleceği üzere WebP Lossy türüne göre dosya boyutu daha büyük olur.
Neden WebP Kullanılmalı?
Bu yazının yayınlandığı tarih itibariyle güncel SEO kriterleri bakımından site hızının oldukça iyi bir etkisi bulunmaktadır. Site hızını etkileyen en önemli etkenler ise sitedeki görsel ve video boyutlarıdır. Özellikle e-ticaret siteleri kaliteli görseller kullandığı için görsel boyutlarından genelde site hızı konusunda gol yiyebilmekte. Bu sebeple tek başına %35'e varan sıkıştırma oranı ile kullanılmaması için hiçbir sebep görünmüyor 🙂
Tabi bu kadar avantajı olan bir yapının dezavantajları da yok değil. Yine bu yazının yayınlandığı tarih itibariyle Internet Explorer, Safari gibi tarayıcılarda WebP desteği bulunmadığı için bu tarayıcılardan giren kullanıcılara sitenizdeki görselleri jpeg ya da png formatlarında gösterebilirsiniz.
WordPress kullanıyorsanız bu durum için çeşitli pluginler mevcut.
WebM Nedir?
Google'ın aynı etkinlikte tanıttığı bir diğer teknoloji ise WebM'dir.
WebM, video ve ses formatları için geliştirilmekle birlikte multimedyalar için MP4 formatına alternatif olarak ortaya çıkarıldı.
Ortaya çıkarılış amacı medya dosyalarının sıkıştırılması ile birlikte sunucu üzerindeki yükün azaltılması içindir.
Neden WebM Kullanılmalı?
Görsel ve işitsel dosya formatlarının site hızına etkisinin optimize etmek için kullanılmakla birlikte, genel dosya boyutlarından ciddi oranda tasarruf yapılmasını amaçlar.
Tıpkı WebP'de olduğu gibi WebM yapısında da dezavantajlar bulunmaktadır. Örneğin yine Internet Explorer, Opera, Safari gibi tarayıcılarda WebM desteğinde bazı sorunlarla karşılaşılabilir. Bu durumda WebP'de olduğu gibi farklı tarayıcılarla sitenizi ziyaret eden kullanıcılara diğer formatlarda multimedya dosyalarınızı gösterebilirsiniz.
