Medya Optimizasyonunun Web Performansındaki Rolü

Görsel ve video dosyaları, modern bir web sayfasının toplam transfer boyutunun ortalama %60 ila %80'ini oluşturur. Yüksek çözünürlüklü medya dosyaları doğrudan sunucu bant genişliğini tüketir, Core Web Vitals (özellikle LCP ve CLS) skorlarını düşürür ve mobil kullanıcı deneyimini zedeler. Doğru bir dijital strateji ile medya varlıklarını optimize etmek, altyapı maliyetlerini düşürürken SEO sıralamalarını yükseltir.

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

Geleneksel JPEG ve PNG formatları, modern sıkıştırma algoritmalarının gerisinde kalmıştır. Trendler doğrultusunda endüstri standardı haline gelen WebP ve AVIF, kaliteden ödün vermeden %30 ila %50 daha yüksek sıkıştırma oranları sunar.

WebP: Tüm modern tarayıcılar tarafından desteklenir. Kayıplı (lossy) ve kayıpsız (lossless) sıkıştırmayı destekler.
AVIF: AV1 video codec tabanlıdır. WebP'ye kıyasla ortalama %20 daha yüksek sıkıştırma sağlar; gradyanlarda ve yüksek detaylı alanlarda renk bozulmalarını önler.

Eski tarayıcılar için geri dönüş (fallback) mekanizması sağlamak üzere native HTML5 <picture> etiketi kullanılır:

<picture>
  <source srcset='gorsel.avif' type='image/avif'>
  <source srcset='gorsel.webp' type='image/webp'>
  <img src='gorsel.jpg' alt='Optimize edilmiş görsel' width='800' height='600' loading='lazy'>
</picture>

Adım 2: Duyarlı Görseller (Responsive Images) ve Doğru Çözünürlük Dağıtımı

Masaüstü cihaz için hazırlanmış 1920px genişliğindeki bir görseli 375px ekrana sahip mobil cihaza yükletmek gereksiz bant genişliği harcar. Tarayıcının ekran genişliğine ve piksel yoğunluğuna (DPI) uygun görseli seçmesi için srcset ve sizes öznitelikleri tanımlanmalıdır.

<img src='kucuk.jpg'
     srcset='kucuk.jpg 480w, orta.jpg 800w, buyuk.jpg 1200w'
     sizes='(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px'
     alt='Duyarlı içerik görseli'>

Adım 3: Native Lazy Loading ve LCP Optimizasyonu

Ekranın altında kalan (below-the-fold) medya içeriklerinin sayfa ilk yüklendiğinde indirilmesi bant genişliği israfıdır. JavaScript kütüphaneleri kullanmadan, native tarayıcı yeteneği olan loading="lazy" kullanılmalıdır.

Kritik Kural: Ekranın üst kısmında yer alan ilk görsel (Hero / LCP öğesi) kesinlikle lazy load edilmemelidir. Bunun yerine fetchpriority="high" atanarak indirme önceliği yükseltilmelidir.

<!-- Ekran üstü ana görsel (LCP) -->
<img src='hero.webp' fetchpriority='high' alt='Ana banner'>

<!-- Ekran altı içerik görselleri -->
<img src='icerik-1.webp' loading='lazy' decoding='async' alt='İçerik detayı'>

Adım 4: Video ve Hareketli Medya Dosyalarında Bant Genişliği Tasarrufu

GIF formatı, modern video formatlarına kıyasla son derece verimsizdir. 10 MB'lık bir GIF animasyonu, MP4 veya WebM formatına dönüştürüldüğünde 500 KB'ın altına düşebilir.

FFmpeg ile Video Dönüştürme ve Sıkıştırma:

# GIF dosyasını MP4 formatına dönüştürme
ffmpeg -i animasyon.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p animasyon.mp4

# WebM formatına dönüştürme
ffmpeg -i animasyon.gif -c vp9 -b:v 0 -crf 41 animasyon.webm

Web üzerinde otomatik oynatılan sessiz videolar için doğru HTML yapısı:

<video autoplay loop muted playsinline width='640' height='360'>
  <source src='video.webm' type='video/webm'>
  <source src='video.mp4' type='video/mp4'>
</video>

Adım 5: Vektörel Grafikler (SVG) ve Temizleme

İkonlar, logolar ve basit illüstrasyonlar için raster (PNG/JPEG) yerine SVG kullanılmalıdır. Grafik yazılımlarından (Figma, Illustrator) dışa aktarılan SVG dosyaları gereksiz metadata, gizli katmanlar ve XML etiketleri barındırır.

SVG dosyaları svgo gibi CLI araçları ile temizlenerek %40-%70 oranında küçültülmelidir.
SVG kodları doğrudan HTML içerisine gömülecekse (inline SVG) HTTP istek sayısını düşürür; harici dosya olarak çağrılacaksa Gzip/Brotli sıkıştırması sunucu tarafında aktif edilmelidir.

Adım 6: CDN ve Cache-Control Stratejisi

Statik medya dosyalarının her istekte sunucudan çekilmesini önlemek, bant genişliğini koruyan en temel adımdır.

Immutable Caching: Değişmeyen medya dosyaları için uzun süreli önbellekleme tanımlanmalıdır: Cache-Control: public, max-age=31536000, immutable. Dosya güncellendiğinde dosya adı versiyonlanmalıdır (örn: banner.v2.webp).
Image CDN: Cloudflare Images, Fastly veya Cloudinary gibi servisler, istek yapan istemcinin ekran boyutuna ve desteklediği formatlara (AVIF/WebP) göre dinamik optimizasyon ve uç noktada (Edge) önbellekleme sağlar.

Sonuç ve Kontrol Listesi

Bu rehber kapsamında uygulanan optimizasyon adımları, bant genişliği tüketimini minimize ederken sayfa yükleme sürelerini belirgin şekilde kısaltır:

[ ] PNG/JPEG dosyaları WebP veya AVIF formatına çevrildi.
[ ] Görsellere explicit width ve height değerleri atanarak CLS hataları önlendi.
[ ] LCP harici tüm alt görsellere loading="lazy" eklendi.
[ ] GIF formatları MP4/WebM video etiketlerine dönüştürüldü.
[ ] Sunucu veya CDN üzerinde 1 yıllık Cache-Control başlıkları yapılandırıldı.