Giriş: Dijital Strateji ve Medya Performansı

Medya dosyaları, ortalama bir web sayfasının toplam ağırlığının %60-80'ini oluşturur. Ağır görseller ve videolar; yüksek sunucu maliyeti, zayıf Core Web Vitals skorları ve kullanıcı kaybı demektir. Bu rehber, bant genişliği tüketimini minimize etmek için gereken teknik adımları ve modern trendler doğrultusundaki optimizasyon tekniklerini içerir.

Adım 1: Yeni Nesil Formatlara Geçiş (WebP ve AVIF)

Geleneksel JPEG ve PNG formatları yüksek veri yükü yaratır. Modern web standartlarında AVIF ve WebP kullanımı zorunluluktur.

WebP: JPEG'e göre %25-35 daha küçük dosya boyutu. Şeffaflık ve animasyon destekler.
AVIF: WebP'ye kıyasla %20-30 daha yüksek sıkıştırma verimliliği. Yüksek dinamik aralık (HDR) destekler.

HTML <picture> etiketiyle geriye dönük uyumluluk sağlanmalıdır:

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

Adım 2: Boyutlandırma ve Duyarlı (Responsive) Görseller

Masaüstü için üretilmiş 2560px genişliğindeki görseli mobil cihaza yükletmek bant genişliği israfıdır. Ekran çözünürlüğüne göre dinamik görsel sunumu şarttır.

srcset ve sizes kullanımı: Tarayıcının ekran genişliğine ve piksel yoğunluğuna (DPR) en uygun dosyayı seçmesini sağlar.
Layout Shift (CLS) Engelleme: Görsellere kesin width ve height veya CSS aspect-ratio verin.

<img src="gorsel-400.jpg"
     srcset="gorsel-400.jpg 400w, gorsel-800.jpg 800w, gorsel-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="Duyarlı görsel örneği">

Adım 3: Tembel Yükleme (Lazy Loading) ve Medya Önceliklendirme

Ekran dışındaki (below-the-fold) medya dosyalarını ilk yüklemede çekmek sayfa açılışını kilitler.

Native Lazy Loading: Görsellere loading="lazy" özelliği ekleyin. JS kütüphanesine gerek kalmaz.
LCP İstisnası: En büyük içerik boyaması (LCP) adayı olan ilk ekran görseline asla lazy load uygulanmaz. fetchpriority="high" atanmalıdır.

Adım 4: Video Medyalarını Optimize Etme

Kısa GIF animasyonları yerine HTML5 video kullanmak veri transferini %80'e kadar azaltır.

GIF formatını MP4 veya WebM formatına dönüştürün.
Arka plan videolarında ses izini (audio track) kaldırarak dosya boyutunu küçültün.
preload="none" veya preload="metadata" kullanarak gereksiz ön yüklemeyi engelleyin.

<video autoplay loop muted playsinline preload="none" poster="onizleme.jpg">
  <source src="animasyon.webm" type="video/webm">
  <source src="animasyon.mp4" type="video/mp4">
</video>

Adım 5: Dağıtım ve CDN Entegrasyonu (Trendler ve Otomasyon)

Manuel sıkıştırma ölçeklenemez. Modern dijital strateji, medya optimizasyonunu CDN seviyesinde otomatize etmeyi gerektirir.

Edge Optimization: Cloudflare, Cloudinary, Imgix gibi servisler ile cihaz ve tarayıcıya göre anlık (on-the-fly) AVIF/WebP dönüşümü yapın.
Cache-Control: Medya varlıklarına uzun süreli önbellekleme başlıkları tanımlayın: max-age=31536000, immutable.

Özet kontrol listesi: Formatı dönüştür (AVIF/WebP), doğru boyutu sun (srcset), ilk ekran dışını ertele (lazy load), HTTP önbellekleme kullan.