Medya Optimizasyonu Neden Kritik?

Görseller web trafiğinin büyük kısmını oluşturur. Ağır görseller sunucu maliyetini artırır, siteyi yavaşlatır, SEO puanını düşürür. Bu rehber, modern web standartlarında medya yükünü minimize etme adımlarını içerir. Herhangi bir dijital ajans veya geliştirici için bant genişliği tasarrufu doğrudan altyapı maliyetini düşürür.

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

Eski PNG ve JPEG formatları bant genişliği israfıdır. Güncel trendler AVIF ve WebP kullanımını standart kılar.

AVIF: JPEG'e göre %50, WebP'ye göre %20 daha küçük dosya boyutu. Yüksek sıkıştırma oranı.
WebP: Geniş tarayıcı desteği, kayıplı ve kayıpsız sıkıştırma.
SVG: Vektörel ikon ve logolar için mutlak tercih. DOM boyutuna dikkat edilmeli, SVGO ile temizlenmeli.

HTML <picture> etiketi ile geriye dönük uyumlu uygulama:

<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>

Adım 2: Responsive Görsel Boyutlandırma (srcset ve sizes)

Mobil cihaza 4K masaüstü görseli göndermek bant genişliği israfıdır. Cihaz ekranına göre doğru boyut servis edilmeli.

<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="Optimize görsel" width="1200" height="800">

Kural: Görsellerin `width` ve `height` değerlerini HTML üzerinde mutlaka belirtin. CLS (Cumulative Layout Shift) sıfırlanır.

Adım 3: Native Lazy Loading ve Decoding Stratejisi

JavaScript kütüphanelerine gerek yok. Tarayıcı native lazy load özelliğini kullanın.

Ekran dışı (below-the-fold) görseller: loading="lazy"
Ekran içi (above-the-fold / LCP) görseller: loading="eager" ve fetchpriority="high"
Ana iş parçacığını (main-thread) bloklamamak için: decoding="async"

Adım 4: Ağır Medyaların Optimizasyonu (GIF yerine MP4/WebM)

GIF formatı sıkıştırma içermez, bant genişliği tüketir. 10 MB GIF, 500 KB MP4/WebM videoya dönüştürülebilir.

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

Adım 5: Otomasyon ve Dağıtım Hattı (Build & CDN)

Optimizasyonu manuel yapmak sürdürülemez. Süreci otomatikleştirin:

Build aşaması: Sharp (Node.js) veya ImageMagick ile build anında toplu sıkıştırma.
Edge CDN: Cloudflare Polish, BunnyCDN veya AWS CloudFront Image Optimization ile uç noktada dinamik WebP/AVIF dönüşümü.
Önbellekleme: Cache-Control: public, max-age=31536000, immutable başlığı ile tekrar eden indirmeleri engelleyin.