Medya Optimizasyonu Neden Kritik?

Büyük görseller bant genişliği tüketir. Sunucu maliyeti artar, sayfa geç yüklenir, Core Web Vitals puanı düşer. Modern web standartlarında optimize edilmemiş medya affedilmez.

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

PNG ve JPEG yerine modern formatlar kullanın. AVIF ve WebP, aynı kalitede %30 ile %70 arası daha az dosya boyutu sağlar.

WebP: Geniş tarayıcı desteği, yüksek sıkıştırma.
AVIF: En güncel trendler arasında; daha yüksek sıkıştırma verimi, modern tarayıcı desteği.

HTML <picture> etiketiyle geriye dönük uyumluluk sağlayın:

<picture> <source srcset="resim.avif" type="image/avif"> <source srcset="resim.webp" type="image/webp"> <img src="resim.jpg" alt="Optimize edilmiş görsel" width="800" height="600" loading="lazy"> </picture>

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

Mobil ekrana 4K görsel sunmayın. srcset ve sizes attribute kullanarak cihaz genişliğine uygun boyutu tarayıcıya seçtirin.

Ekran çözünürlüğüne göre 400px, 800px, 1200px varyantlar üretin.
Görsellere her zaman sabit width ve height değerleri atayın; Cumulative Layout Shift (CLS) sorununu engelleyin.

Adım 3: Native Lazy Loading Uygulaması

Ekran dışında kalan tüm görsellere native lazy loading uygulayın. Harici JS kütüphaneleri kullanmayın; tarayıcı motoru işi çözer.

Görsel etiketi: <img src="medya.jpg" loading="lazy" alt="Rehber görseli">
Above-the-fold (ilk ekran) görsellerine asla loading="lazy" vermeyin; LCP metriklerini bozar.
İlk ekrandaki ana görsel için: fetchpriority="high" kullanın.

Adım 4: GIF Yerine HTML5 Video Kullanımı

Animasyonlu GIF dosyaları devasadır. Dijital ajans seviyesi modern web projelerinde GIF terk edilmelidir. Yerine WebM veya MP4 video kullanın.

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

Bu yöntem 10 MB'lık GIF dosyasını 300 KB video dosyasına indirir.

Adım 5: Görsel CDN (Image CDN) ve Cache Stratejisi

Görselleri doğrudan kaynak sunucudan sunmayın. Cloudflare, Cloudinary veya Fastly gibi servislerle uç noktada (Edge) dinamik format dönüşümü ve sıkıştırma uygulayın. Cache-Control başlıklarını agresif ayarlayın (örn. max-age=31536000, immutable).