Medya Optimizasyonunun Önemi

Görseller web trafiğinin büyük kısmını tüketir. Ağır medya dosyaları sayfa hızını düşürür, sunucu maliyetini artırır, SEO puanını bozar. Modern web standartlarında her dijital ajans görsel optimizasyonunu zorunlu adım kabul eder. Bu rehber, bant genişliği tasarrufu sağlayan adımları listeler.

Adım 1: Yeni Nesil Formatlara Geçiş

Eski JPEG ve PNG yerine AVIF ve WebP kullanın. AVIF, JPEG'e göre %50'ye varan boyut avantajı sağlar.

WebP: Geniş tarayıcı desteği, yüksek kayıpsız/kayıplı sıkıştırma.
AVIF: En yüksek sıkıştırma oranı, güncel tarayıcı desteği.
SVG: Vektörel ikon ve logolar için sıfır kalite kaybı, minimum dosya boyutu.

picture etiketi fallback mekanizması sağlar: modern tarayıcı AVIF çeker, desteklemeyen WebP veya JPEG alır.

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

Masaüstü için üretilen 4K görseli mobilde yükletmeyin. HTML srcset ve sizes attribute'larını kullanın.

Örnek Kodlama

Platform native çözümü:

<picture>
  <source srcset="resim.avif" type="image/avif" />
  <source srcset="resim.webp" type="image/webp" />
  <img src="resim.jpg" alt="Açıklama" width="800" height="600" loading="lazy" decoding="async" />
</picture>

width ve height belirtmek Layout Shift (CLS) hatasını önler.

Adım 3: Native Lazy Loading ve Decoding

Ekran dışındaki medyayı ilk anda çekmeyin. JS kütüphaneleri yerine tarayıcı desteği kullanın.

loading="lazy": Görsel görüş alanına yaklaşınca yüklenir.
decoding="async": Görsel çözümleme işlemi ana iş parçacığını (main thread) bloke etmez.
fetchpriority="high": LCP görseline lazy loading vermeyin, priority ekleyin.

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

Ağır GIF dosyaları yerine sessiz döngüsel HTML5 video kullanın. GIF boyutu 10MB iken MP4/WebM eşleniği 500KB altına düşer.

GIF yerine <video autoplay loop muted playsinline> kullanın.
Video codec: H.264 yerine AV1 veya VP9 tercih edin.
Video akışında HLS/DASH ile dinamik çözünürlük verin.

Adım 5: Otomasyon ve CDN Entegrasyonu

Sektördeki trendler, görsel dönüşümünü derleme anında (build time) veya edge CDN üzerinde gerçek zamanlı yapmayı gerektirir.

Sharp / Squoosh: Build aşamasında otomatik görsel sıkıştırma.
SVGO: SVG dosyalarındaki gereksiz meta verileri temizleme.
Image CDN (Cloudflare Polish, Imgix): Cihaza ve ağ hızına göre anlık boyut ve format dağıtımı.
HTTP Cache-Control: Medya için uzun süreli önbellek başlığı (max-age=31536000, immutable).