Mobil cihazlarda şəkilin kiçik ölçüdə yüklənməsini necə təmin etmək olar?

Mobil cihazlarda kiçik ölçülü şəkilləri yükləmək üçün HTML və CSS vasitəsilə uyğun şəkillər istifadə olunur:

1. Brauzerin ekran ölçüsünə uyğun düzgün şəkil ölçüsünü seçməsi üçün <img> elementindən srcset və sizes atributları ilə istifadə edin:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Şəkil təsviri">

2. CSS istifadə edərək şəkilin maksimum enini məhdudlaşdırın:

img {
  max-width: 100%;
  height: auto;
}

3. Fayl ölçüsünü azaltmaq üçün müasir şəkil formatları (WebP, AVIF) da istifadə oluna bilər.

Beləliklə, mobil cihazda brauzer optimal ölçülü faylı yükləyəcək, bu da performansı yaxşılaşdırır və trafik azaldır.