Kaip užtikrinti, kad vaizdas būtų įkeltas sumažintu dydžiu mobiliuosiuose įrenginiuose?

Norint įkelti mažesnio dydžio vaizdus mobiliuosiuose įrenginiuose, naudojami adaptuojami vaizdai su HTML ir CSS:

1. Naudokite <img> elementą su srcset ir sizes atributais, kad naršyklė pasirinktų tinkamą vaizdo dydį pagal ekrano dydį:

<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="Vaizdo aprašymas">

2. Naudokite CSS, kad apribotumėte maksimalų vaizdo plotį:

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

3. Taip pat galima naudoti modernius vaizdo formatus (WebP, AVIF), kad sumažintumėte failo dydį.

Taip naršyklė mobiliajame įrenginyje įkels optimalų dydį failo, kas pagerins našumą ir sumažins srautą.