Medya Optimizasyonu Neden Kritik?

Medya dosyaları toplam sayfa boyutunun yüzde 60-80 kısmını oluşturur. Ağır görseller sunucu kaynaklarını tüketir, bant genişliği maliyetlerini artırır, Core Web Vitals metriklerini bozar. Etkili bir dijital strateji, veri transferini minimize ederken kullanıcı deneyimini korur.

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

Geleneksel formatlar (JPEG, PNG) yüksek dosya boyutu üretir. Modern web trendleri kayıpsız ve yüksek sıkıştırma sağlayan formatları zorunlu kılar.

WebP: PNG ve JPEG formatlarına göre yüzde 25-35 daha küçük dosya boyutu.
AVIF: WebP formatına kıyasla yüzde 20 daha yüksek sıkıştırma, üstün renk doğruluğu.

Uygulama (HTML Picture Elementi)

Modern tarayıcılara AVIF/WebP sunup eski tarayıcılara fallback bırakmak için native HTML yeterlidir:

<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">
</picture>

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

Mobil cihaza 4K çözünürlükte görsel göndermek bant genişliği israfıdır. Ekran çözünürlüğüne göre dinamik görsel boyutu seçilmelidir.

srcset ve sizes: Tarayıcının ekran genişliğine ve piksel yoğunluğuna (DPR) uygun resmi çekmesini sağlar.
CSS yerine Piksel Doğruluğu: Görselleri CSS ile küçültmek dosya boyutunu düşürmez. Görseller sunucu tarafında veya derleme anında (build-time) kesilmelidir.

Adım 3: Native Lazy Loading ve Decode Optimizasyonu

Ekran dışında kalan (below-the-fold) medya dosyaları kullanıcı kaydırma yapana kadar yüklenmemelidir. Harici JavaScript kütüphanelerine gerek yoktur; tarayıcı seviyesi özellikler kullanılır.

loading="lazy": Tarayıcı seviyesinde gecikmeli yükleme.
decoding="async": Görsel çözümleme işlemini ana iş parçacığından (main thread) ayırır, rendering gecikmelerini önler.
Önemli İstisna: Sayfa açılışındaki LCP (Largest Contentful Paint) görselinde lazy loading kullanılmaz; fetchpriority="high" atanır.

Adım 4: Video Medyalarının Sıkıştırılması ve Barındırma

Animasyonlu GIF dosyaları inanılmaz derecede verimsizdir. GIF yerine sessiz, döngüsel MP4 veya WebM videolar tercih edilmelidir.

10 MB boyutundaki bir GIF, WebM/MP4 formatında 500 KB altına düşer (yüzde 95 tasarruf).
Uzun videolar için harici CDN veya video akış protokolleri (HLS/DASH) tercih edilmeli, doğrudan web sunucusundan statik video servis edilmemelidir.

Adım 5: Vektör Grafikler ve İkon Optimizasyonu

Logo, ikon ve basit illüstrasyonlar için raster formatlar (PNG/JPG) yerine SVG kullanılmalıdır.

Gereksiz XML meta verilerini, editör artıklarını (Adobe Illustrator, Figma etiketleri) SVGO aracı ile temizleyin.
Büyük ikon setlerini tek bir font dosyası olarak yüklemek yerine sadece kullanılan SVG ikonlarını inline veya sprite olarak dahil edin.

Adım 6: CDN ve Ön Bellekleme (Cache-Control)

Optimize edilen medya dosyalarının tekrar tekrar sunucudan çekilmesini engellemek için HTTP başlıkları optimize edilmelidir.

Cache-Control: public, max-age=31536000, immutable

Statik ve hashlenmiş medya dosyalarına 1 yıllık önbellek ömrü atayın. Cloudflare, Fastly gibi CDN ağları üzerinden Edge caching ve görsel sıkıştırma özelliklerini aktif hale getirin.