Kuidas tagada, et pilt laaditakse mobiilseadmetes väiksemas suuruses?

Mobiilseadmetes väiksema suurusega piltide laadimiseks kasutatakse adaptiivseid pilte HTML ja CSS abil:

1. Kasutage <img> elementi koos srcset ja sizes atribuutidega, et brauser valiks sobiva pildi suuruse vastavalt ekraani suurusele:

<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="Pildi kirjeldus">

2. Kasutage CSS-i, et piirata pildi maksimaalset laiust:

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

3. Samuti saab kasutada kaasaegseid pildiformaate (WebP, AVIF), et vähendada failide suurust.

Nii laadib mobiilseadme brauser optimaalse suurusega faili, mis parandab jõudlust ja vähendab liiklust.