Web Sitesi Hızı İçin Görsel Optimizasyonu: Kapsamlı Rehber

Görseller, sayfa ağırlığının yaklaşık yüzde 50'sini oluşturur. Onları optimize etmek, performans iyileştirmesinde en büyük etkiyi yaratır.

---

Neden Önemli?

• Mobil kullanıcıların yüzde 53'ü yükleme 3 saniyeyi geçerse sayfayı terk ediyor
• 1 saniyelik gecikme = yüzde 7 dönüşüm kaybı
• Core Web Vitals (LCP ve CLS) Google sıralamalarını doğrudan etkiliyor

---

Adım 1: Doğru Formatı Seçin

• WebP: Tüm web kullanımları için en iyisi (JPEG'den %25–35 daha küçük)
• PNG: Şeffaflık ve logolar
• JPEG: Fotoğraflar
• SVG: İkonlar ve vektör grafikler
• AVIF: Fallback destekli yeni nesil format

---

Adım 2: Sıkıştırın

TinyImg — tarayıcı tabanlı, tam gizlilik.

---

Adım 3: Duyarlı Görseller

<img src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Alt text" width="800" height="600" />

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Alt text" width="800" height="600" />
</picture>

---

Adım 4: Lazy Loading

<img src="image.webp" loading="lazy" alt="Description" width="800" height="600" />

Sayfa açıldığında görünen (ekranın üst kısmındaki) görsellere lazy loading uygulamayın.

---

Adım 5: Boyutları Belirtin

<img src="photo.webp" alt="Photo" width="800" height="600" />

---

Adım 6: CDN Kullanın

Cloudflare, Cloudinary, imgix ve Vercel öne çıkan seçeneklerdir.

---

Adım 7: Ölçün ve İzleyin

• LCP: 2,5 saniyenin altında
• CLS: 0,1'in altında
• Görsel ağırlığı: 500 KB'ın altında

---

Kontrol Listesi

• WebP formatı
• TinyImg ile sıkıştırma
• srcset ve sizes
• Alt kısımdaki görseller için lazy loading
• width ve height tanımları
• CDN
• PageSpeed Insights denetimi