Görseller Web Sitesini Nasıl Yavaşlatır? WebP ve AVIF Rehberi

Görseller neden performans sorunu oluşturur?

Bir web sayfasındaki en büyük veri transferlerinden biri çoğu zaman görsellerdir. Kamera veya tasarım programından çıkan birkaç megabaytlık bir dosyayı doğrudan siteye yüklemek, özellikle mobil bağlantıda sayfanın belirgin biçimde yavaşlamasına neden olabilir.

Dosya formatı tek başına yeterli değildir

WebP ve AVIF modern sıkıştırma seçenekleri sunar; ancak 4000 piksel genişliğindeki bir görseli yalnızca format değiştirerek kullanmak doğru optimizasyon değildir. Görüntünün ekranda gösterileceği fiziksel boyut da küçültülmelidir.

WebP nedir?

WebP, kayıplı ve kayıpsız sıkıştırmayı destekleyen modern bir görsel formatıdır. Fotoğraf, illüstrasyon ve birçok web görselinde JPEG veya PNG’ye göre daha düşük dosya boyutları sağlayabilir.

AVIF nedir?

AVIF, modern görüntü sıkıştırma tekniklerini kullanan bir formattır ve uygun içeriklerde oldukça küçük dosya boyutları sağlayabilir. Ancak kodlama süresi, iş akışı ve tarayıcı desteği gibi konular projenin hedef kitlesine göre değerlendirilmelidir.

Hangisini kullanmalısınız?

Tek bir formatı her yerde zorunlu kılmak yerine görsel türü ve hedef tarayıcılara göre seçim yapın. Modern tarayıcılarda AVIF veya WebP sunup gerektiğinde geriye dönük alternatif sağlayabilirsiniz.

Responsive görseller neden önemlidir?

Masaüstünde 1400 piksel gereken bir görseli mobilde de aynı boyutta göndermek gereksiz veri tüketir. HTML’de srcset ve sizes kullanarak tarayıcının ekrana uygun görseli seçmesine yardımcı olabilirsiniz.

Hero görsel ve LCP ilişkisi

Sayfanın üst bölümündeki büyük ana görsel çoğu zaman Largest Contentful Paint adaylarından biridir. Bu nedenle ana görseli gereksiz geciktirmek veya çok büyük dosya olarak sunmak açılış deneyimini olumsuz etkileyebilir.

Lazy loading nerede kullanılmalı?

Ekranın aşağısındaki görseller için gecikmeli yükleme faydalıdır. Ancak ilk ekranda hemen görünmesi gereken kritik ana görseli gereksiz yere lazy load yapmak LCP süresini kötüleştirebilir.

Görsel boyutlarını HTML’de belirtin

width ve height değerleri veya uygun aspect-ratio kullanmak, tarayıcının görsel gelmeden önce alan ayırmasına yardımcı olur. Böylece içerik kaymaları ve CLS sorunları azaltılabilir.

Kalite ayarını gözle kontrol edin

En küçük dosyayı elde etmek uğruna aşırı sıkıştırma yapmak marka görsellerini ve ürün fotoğraflarını bozabilir. Farklı kalite seviyelerini karşılaştırın ve algılanan kalite ile dosya boyutu arasında denge kurun.

CDN ve cache desteği

Yoğun trafikli projelerde görsel CDN’leri cihaz boyutuna göre otomatik yeniden boyutlandırma ve modern format sunma gibi avantajlar sağlayabilir. Tarayıcı önbelleği de tekrar ziyaretlerde veri transferini azaltır.

Sonuç

Görsel optimizasyonu yalnızca “WebP’ye çevir” işleminden ibaret değildir. Doğru boyut, uygun format, responsive kaynaklar, kritik görsellere öncelik ve doğru lazy loading birlikte ele alınmalıdır. Daha fazla hızlandırma rehberi için Web Performansı kategorimizi inceleyebilirsiniz.