Bir web sayfasında resimlerin yüklenmesini nasıl optimize edersiniz?

1. Sıkıştırma: Kaliteden ödün vermeden görüntü boyutunu optimize etmek için araçlar kullanın (örneğin, TinyPNG, Compressor.io).
2. Formatlar: JPEG ve PNG'ye kıyasla daha iyi sıkıştırma sağlayan WebP veya AVIF gibi modern formatları tercih edin. Eski tarayıcılar için <picture> veya srcset özniteliği ile fallback kullanın.
3. Lazy Loading: Görüntülerin görünüm alanı dışında olanlarını ihtiyaç duyulana kadar yüklemeyi erteleyin. Yerel loading="lazy" veya JavaScript kütüphanelerini kullanın.
4. Duyarlı Görüntüler: Farklı ekran boyutları ve çözünürlükler için farklı sürümler sunmak adına <picture> etiketi veya srcset/sizes özniteliklerini kullanın.
5. CDN (İçerik Dağıtım Ağı): Görüntüleri, kullanıcıya en yakın konumdan daha hızlı teslim etmek için CDN üzerinde barındırın.
6. Önbellekleme: Sunucuda uygun önbellek başlıkları ayarlayarak tarayıcının görüntüleri önbelleğe almasını ve tekrar ziyaretlerde yerel önbellekten yüklemesini sağlayın.
7. Placeholder/Blurhash: Yüklenirken düşük kaliteli "placeholder" veya üretilmiş Blurhash gösterin.

loading="lazy" kullanımı örneği:

<img src="image.jpg" alt="Görüntü açıklaması" loading="lazy">

Farklı formatlar için <picture> kullanımı örneği:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Görüntü açıklaması">
</picture>