Мобил түзмөктөрдө сүрөт кыска өлчөмдө жүктөлсүн деген кандай жолдор бар?

Мобилдик түзмөктөрдө кичинекей өлчөмдөгү сүрөттөрдү жүктөө үчүн адаптивдүү сүрөттөр HTML жана CSS аркылуу колдонулат:

1. Браузер экрандын өлчөмүнө ылайык туура сүрөт өлчөмүн тандоо үчүн <img> элементин srcset жана sizes атрибуттары менен колдонуңуз:

<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="Сүрөттүн сүрөттөмөсү">

2. CSS колдонуп, сүрөттүн максималдуу кеңдигин чектеңиз:

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

3. Модерн сүрөт форматтары (WebP, AVIF) да файлдын өлчөмүн кыскартуу үчүн колдонулушу мүмкүн.

Ошентип, мобилдик түзмөктөгү браузер оптималдуу өлчөмдөгү файлды жүктөйт, бул иштөөчәндикти жакшыртат жана трафикти азайтат.