Medya Optimizasyonu Neden Zorunlu?

Medya dosyaları web sayfası boyutunun ortalama %60-80 kısmını kaplar. Yüksek bant genişliği sunucu maliyetini artırır, Core Web Vitals (LCP) puanını düşürür. Her dijital ajans ve modern web geliştiricisi için optimize edilmiş medya birincil performans kuralıdır.

Adım 1: Yeni Nesil Format Seçimi (AVIF ve WebP)

JPEG ve PNG yerine modern formatlar kullan. AVIF, JPEG'e göre %50, WebP ise %30 daha az yer kaplar.

Vektör (İkon, logo): SVG kullan. Gereksiz metadata temizle (SVGO).
Fotoğraf: AVIF birincil tercih. WebP yedek tercih.
Şeffaf görseller: WebP veya şeffaflık destekli AVIF.

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

Masaüstü için 2000px görseli mobilde 400px ekrana yükleme. HTML <picture> ve srcset attribute'larını zorunlu kıl.

<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 değerlerini mutlaka tanımla. Cumulative Layout Shift (CLS) engelle.

Adım 3: Kayıplı / Kayıpsız Sıkıştırma Pipeline Kurulumu

Otomasyonsuz optimizasyon sürdürülemez. CI/CD veya build adımlarında görselleri optimize et:

Build araçları: Webpack/Vite için sharp veya imagemin entegre et.
CLI sıkıştırma: cwebp -q 80 input.png -o output.webp
Video sıkıştırma: GIF formatını bırak. H.264/H.265 veya AV1 kodlu MP4/WebM döngüsü kullan (FFmpeg: ffmpeg -i input.mov -vcodec libx264 -crf 28 out.mp4).

Adım 4: Yükleme Stratejileri (Lazy Loading ve Fetch Priority)

Tüm medyayı ilk anda çekme. Görünür alan stratejisi uygula:

Above-the-fold (LCP görseli): loading="eager" ve fetchpriority="high" ata. Preload ekle.
Below-the-fold (Ekran dışı görseller): loading="lazy" ve decoding="async" kullan.

Adım 5: CDN ve Cache-Control Yapılandırması

Görselleri doğrudan uygulama sunucusundan servis etme. Edge CDN kullan (Cloudflare, AWS CloudFront, Cloudinary).

Header yapılandırması: Cache-Control: public, max-age=31536000, immutable.
Image CDN kullanarak URL bazlı anlık boyutlandırma ve format dönüşümü sağla.

Sonuç ve Trendler

Modern web trendleri istemci taraflı decoding yükünü azaltan AVIF ve donanım hızlandırmalı video formatlarına odaklanır. Bu rehber adımlarını uygulayarak bant genişliği tüketimini %70'e kadar düşür, sayfa yükleme hızını artır.