Görsel Optimizasyonu: WebP, AVIF ve Lazy Loading ile Hız Kazanın

Görseller ortalama bir web sayfasının toplam boyutunun yüzde 50-70'ini oluşturur. Optimize edilmemiş görseller sayfa yükleme süresini dramatik şekilde artırır. Görsel optimizasyonu ile WebP ve AVIF formatlarına geçiş yaparak, lazy loading uygulayarak ve responsive srcset kullanarak sayfa hızınızı önemli ölçüde artırabilirsiniz.

WebP ve AVIF Formatları

WebP, Google tarafından geliştirilen ve JPEG'e kıyasla yüzde 25-35 daha küçük dosya boyutu sunan modern görsel formatıdır. AVIF ise AV1 video codec'inden türetilmiş ve WebP'den bile yüzde 20 daha verimli bir formattır. Tarayıcı desteği açısından WebP yüzde 97 üzerinde, AVIF yüzde 90 civarındadır.

Format	JPEG'e Göre Tasarruf	Tarayıcı Desteği	Encoding Hızı
WebP	%25-35	%97+	Hızlı
AVIF	%40-50	%90+	Yavaş
JPEG XL	%35-45	Sınırlı	Orta

💡 İpucu: Görselleri otomatik olarak WebP/AVIF formatına dönüştürmek için CDN seviyesinde image optimization kullanın. Cloudflare Polish ve AWS CloudFront image optimization bu işlemi otomatik yapar.

Lazy Loading Uygulaması

Lazy loading, ekranın görünür alanı dışındaki görsellerin sayfa yüklenirken değil, kullanıcı o bölgeye kaydırdığında yüklenmesini sağlar. HTML'de loading="lazy" attribute'u ile native lazy loading kullanabilirsiniz. Bu özellik tüm modern tarayıcılarda desteklenir.

⚠️ Önemli: LCP öğesinde (hero görsel, banner) lazy loading kullanmayın. Bu, en büyük içerik öğesinin geç yüklenmesine ve Core Web Vitals LCP metriğinin kötüleşmesine neden olur.

Responsive Görseller ve srcset

Farklı ekran boyutları için farklı görsel boyutları sunmak bant genişliği tasarrufu sağlar. srcset ve sizes attribute'ları ile tarayıcının ekran boyutuna uygun görseli seçmesini sağlayın. web.dev responsive images rehberi detaylı bilgi sunar. PageSpeed puanınızı artırmak için bu adım kritiktir.

Sıkça Sorulan Sorular

WebP mi AVIF mi kullanmalıyım?

Her ikisini de picture element ile sunun: AVIF birincil, WebP yedek, JPEG son çare. Tarayıcı desteklediği en verimli formatı otomatik seçer.

Görsel optimizasyonu SEO'yu etkiler mi?

Evet, doğrudan etkiler. Hızlı yüklenen görseller Core Web Vitals metriklerini iyileştirir. Alt text ve dosya adı optimizasyonu görsel arama sıralamasını artırır.

Mevcut görselleri toplu olarak nasıl dönüştürebilirim?

Squoosh CLI, Sharp (Node.js) veya ImageMagick ile toplu dönüştürme yapabilirsiniz. WordPress kullanıyorsanız ShortPixel veya Imagify eklentileri otomatik dönüştürme sağlar.

Görsel optimizasyonu tamamladıktan sonra CDN rehberimizi ve JavaScript performans makalemizi inceleyin.

Görsel Optimizasyonlu Hosting

Hosted Cloud sunucularında otomatik WebP dönüştürme ve CDN entegrasyonu ile görsellerinizi optimize edin.

Hosting Planlarını İnceleyin