1. Doğru Format Seçimi

Eski formatlar (JPEG, PNG) bant genişliği tüketir. Modern dijital strateji yeni nesil formatları zorunlu kılar.

AVIF: En yüksek sıkıştırma oranı. Modern tarayıcılar için öncelikli tercih.
WebP: Geniş tarayıcı desteği, yüksek sıkıştırma, şeffaflık ve animasyon desteği.
SVG: Vektörel grafikler, logolar ve ikonlar için sıfır kalite kaybı, minimum boyut.

AVIF ve WebP kullanımı görsel boyutlarını JPEG/PNG formatlarına kıyasla %30-80 oranında düşürür.

2. Responsive Görseller ve Boyutlandırma

Masaüstü için üretilen 4K görseli mobilde yükletmek gereksiz kaynak tüketir. <picture> ve srcset kullanın.

<picture>
  <source srcset='image.avif' type='image/avif'>
  <source srcset='image.webp' type='image/webp'>
  <img src='image.jpg' alt='Örnek' width='800' height='600' loading='lazy'>
</picture>

3. Native Lazy Loading Uygulaması

Ekran dışı görselleri hemen yüklemeyin. Tarayıcının yerel özelliğini kullanın:

Görsellere loading='lazy' ekleyin. Ekstra JavaScript kütüphanesi kullanmayın.
İlk ekranda (Above the fold / LCP) yer alan görsellerde lazy loading kullanmayın; fetchpriority='high' ekleyin.
Düzen kaymasını (CLS) önlemek için width ve height özniteliklerini mutlaka tanımlayın.

4. Video ve Medya Optimizasyonu

Ağır GIF dosyaları yerine video formatları tercih edilmelidir.

GIF yerine MP4/WebM: Animasyonlu GIF dosyalarını <video autoplay loop muted playsinline> formatına dönüştürün (%90 boyut tasarrufu).
Video Akışı (Streaming): Uzun videoları doğrudan sunucudan çekmeyin; HLS/DASH veya YouTube/Vimeo gibi harici platformları gömün (embed).

5. CDN ve Önbellekleme Trendleri

Statik medyayı ana sunucuda tutmayın. Dijital strateji adımları:

Image CDN: Cloudflare, Imgix veya Cloudinary ile anlık format dönüştürme ve sıkıştırma uygulayın.
Cache-Control: Medya dosyalarına uzun süreli önbellek başlığı verin (Cache-Control: public, max-age=31536000, immutable).
Brotli/Gzip: SVG dosyalarını sunucu düzeyinde sıkıştırın.