Veb səhifədə şəkil yükləməsini necə optimallaşdırmaq olar?

1. Sıxışdırma: Keyfiyyətdən ödün vermədən şəkil ölçüsünü optimallaşdırmaq üçün alətlərdən istifadə edin (məsələn, TinyPNG, Compressor.io).
2. Formatlar: JPEG və PNG ilə müqayisədə daha yaxşı sıxışdırma təmin edən WebP və ya AVIF kimi müasir formatları seçin. Köhnə brauzerlər üçün <picture> və ya srcset atributundan fallback kimi istifadə edin.
3. Lazy Loading: Görüntülərin görünən sahədən kənar olanlarını lazım olanadək yükləməkdən çəkindirin. loading="lazy" və ya JavaScript kitabxanalarından istifadə edin.
4. Responsiv şəkillər: Fərqli ekran ölçüləri və həllər üçün müxtəlif versiyalar təqdim edin, <picture> elementi və ya srcset/sizes atributlarından istifadə etməklə.
5. CDN (Content Delivery Network): Şəkilləri CDN-də yerləşdirin ki, məzmun ən yaxın yerləşmədən daha sürətli çatdırılsın.
6. Keşləmə: Serverdə düzgün keş başlıqlarını qurun ki, brauzer şəkilləri yadda saxlasın və təkrar ziyarətlərdə yerli keşdən yükləsin.
7. Placeholder/Blurhash: Yüklenərkən aşağı keyfiyyətli "placeholder" və ya Blurhash göstərin.

loading="lazy" istifadə nümunəsi:

<img src="image.jpg" alt="Şəkil təsviri" loading="lazy">

Fərqli formatlar üçün <picture> nümunəsi:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Şəkil təsviri">
</picture>