1. Yeni Nesil Görsel Formatlarına Geçiş

JPEG ve PNG eskidi. Modern web standartları WebP ve AVIF gerektirir. AVIF, JPEG'e göre %50'den fazla boyut tasarrufu sağlar. Tarayıcı desteği için <picture> elementi kullanın:

<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>

2. Doğru Boyutlandırma ve Responsive Görseller

Masaüstü için yüklenen 2000px görseli mobilde göstermek bant genişliği israfıdır. srcset ve sizes kullanarak cihaza göre görsel indirtin:

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

3. Native Lazy Loading Kullanımı

Harici JS kütüphanelerini kaldırın. Tarayıcı native desteğini kullanın:

loading="lazy": Ekran dışı görseller için.
fetchpriority="high": LCP (Hero) görseli için. Lazy load yapmayın.
width ve height: CLS engellemek için zorunlu.

4. GIF Yerine Video Kullanımı

GIF dosyaları ağı tıkar. 10 MB GIF yerine aynı içerik 500 KB MP4/WebM video ile çözülür:

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

5. Vektör (SVG) Temizliği ve CDN Dağıtımı

Grafik ve ikonlarda SVG kullanın. SVG dosyalarını SVGO aracıyla gereksiz metadata ve boşluklardan temizleyin. Dijital ajans altyapılarında görsel teslimatını Image CDN (Cloudflare Images, Cloudinary vb.) arkasına alın; sıkıştırma, format dönüşümü ve edge cache sunucu yükünü keser.

Trendler gereksiz kod ve medya yükünden kaçınmayı şart koşar. En hızlı istek, hiç yapılmayan istektir.