Medya Optimizasyonu ve Performans Etkisi

Medya dosyaları sayfa ağırlığının ortalama %60-80 kısmını oluşturur. Ağır görseller sunucu bant genişliğini tüketir, First Contentful Paint (FCP) ve Largest Contentful Paint (LCP) metriklerini bozar. Başarılı bir dijital ajans için optimize edilmiş medya altyapısı, doğrudan SEO sıralaması ve dönüşüm oranı kazancıdır.

1. Adım: Yeni Nesil Görsel Formatlarına Geçiş (AVIF ve WebP)

JPEG ve PNG formatları eski standartlardır. Modern web standartlarında AVIF ve WebP kullanılmalıdır. AVIF, JPEG formatına kıyasla %50'ye varan dosya boyutu avantajı sağlar.

WebP: Geniş tarayıcı desteği, yüksek sıkıştırma, şeffaflık (alpha channel) desteği.
AVIF: Üstün sıkıştırma oranı, yüksek renk derinliği, modern tarayıcı uyumluluğu.

Tüm görselleri kayıpsız (lossless) veya kontrollü kayıplı (lossy - %80-85 kalite) AVIF/WebP formatına dönüştürün.

2. Adım: Duyarlı Görseller (Responsive Images)

Mobil cihaza 4K masaüstü görseli sunulmamalıdır. <picture> ve srcset kullanarak çözünürlük anahtarlaması yapın.

<picture>
  <source type="image/avif" srcset="img-400.avif 400w, img-800.avif 800w" sizes="(max-width: 600px) 400px, 800px">
  <source type="image/webp" srcset="img-400.webp 400w, img-800.webp 800w" sizes="(max-width: 600px) 400px, 800px">
  <img src="img-800.jpg" alt="Optimize Medya" width="800" height="600" loading="lazy" decoding="async">
</picture>

3. Adım: Native Lazy Loading ve Decoding Optimizasyonu

Ekran dışı (below-the-fold) medya öğelerini tarayıcının yerel lazy load özelliğiyle erteleyin. Ekran içi ilk görselde (LCP adayı) lazy loading kullanmayın, tersine fetchpriority="high" atayın.

Ekran dışı görseller: loading="lazy" decoding="async"
Hero / LCP görseli: loading="eager" fetchpriority="high"
Kümülatif Düzen Kaymasını (CLS) önlemek için width ve height değerlerini mutlaka tanımlayın.

4. Adım: Video ve Hareketli Medya Optimizasyonu

GIF formatı bant genişliği düşmanıdır. 10 MB bir GIF, MP4/WebM formatında 500 KB altına iner.

<video autoplay loop muted playsinline>
  <source src="animasyon.webm" type="video/webm">
  <source src="animasyon.mp4" type="video/mp4">
</video>

5. Adım: Edge Caching ve Image CDN Kullanımı

Görselleri doğrudan kaynak sunucudan (origin) sunmak yerine Cloudflare Images, Fastly veya Imgix benzeri CDN servisleriyle uç noktada optimize edin. Bu servisler istemci Accept başlığına göre otomatik AVIF/WebP dönüşümü ve cihaz genişliğine göre yeniden boyutlandırma yapar.

Modern Web Trendleri ve En İyi Uygulamalar

Sektörel trendler, medya optimizasyonunun derleme anında (build-time) veya edge katmanında otomatikleştirildiğini gösterir. Bu rehber adımlarını CI/CD boru hattına entegre ederek bant genişliği maliyetlerini %60 azaltabilir, sayfa yükleme sürelerini 1 saniyenin altına indirebilirsiniz.