Görsel ve Medya Optimizasyonu Neden Kritik?

Medya dosyaları web sayfası boyutunun ortalama %60'ını oluşturur. Ağır görseller sunucu faturasını artırır, kullanıcıyı kaçırır. Başarılı bir dijital strateji için medya optimizasyonu zorunludur.

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

Eski JPEG ve PNG formatları yüksek veri tüketir. Modern web trendleri AVIF ve WebP kullanımını standart hale getirdi. AVIF, JPEG'e göre %50'ye varan boyut avantajı sağlar.

Uygulama:

Native <picture> elementi kullan. Tarayıcı desteğine göre en hafif format otomatik sunulur:

<picture>
  <source srcset="gorsel.avif" type="image/avif">
  <source srcset="gorsel.webp" type="image/webp">
  <img src="gorsel.jpg" alt="Optimize Medya" width="800" height="600">
</picture>

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

Mobil ekrana masaüstü boyutunda görsel göndermek bant genişliğini boşa harcar. srcset ve sizes öznitelikleriyle ekrana uygun boyutu yükle.

srcset: Farklı genişlikteki görsel varyasyonlarını tanımlar.
sizes: Medya sorgularına göre ekranın ne kadar yer kaplayacağını belirtir.

<img src="kucuk.jpg" 
     srcset="kucuk.jpg 480w, orta.jpg 800w, buyuk.jpg 1200w" 
     sizes="(max-width: 600px) 480px, 800px" 
     alt="Responsive Medya">

Adım 3: Yerel (Native) Lazy Loading Kullanımı

Ekran dışında kalan görseller hemen yüklenmemelidir. Harici JavaScript kütüphanelerine gerek yok. Tarayıcının yerel özelliğini kullan:

<img src="gorsel.webp" loading="lazy" alt="Tembel Yüklenen Medya">

Kural: İlk ekranda (Above the fold) yer alan LCP görseline asla loading="lazy" ekleme. Sadece ekran kaydırılınca görünen içeriklere uygula.

Adım 4: Hareketli Medya: GIF Yerine Video Tercihi

Animasyonlu GIF formatı verimsizdir ve megabaytlarca bant genişliği tüketir. GIF yerine sessiz MP4 veya WebM formatı kullan:

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

Adım 5: HTTP Önbellekleme ve CDN Entegrasyonu

Optimizasyonun son aşaması içerik dağıtım ağı (CDN) ve doğru önbellek başlıklarıdır. Bu rehber adımı tekrar eden ziyaretlerde bant genişliği tüketimini sıfıra indirir.

Cache-Control: Statik medya dosyaları için public, max-age=31536000, immutable başlığı tanımla.
CDN: Görselleri kullanıcıya en yakın sunucudan ilet, ana sunucu yükünü azalt.