Kako učiniti da se slika učitava u smanjenom formatu na mobilnim uređajima?

За učitavanje slika u smanjenoj veličini na mobilnim uređajima koriste se adaptivne slike pomoću HTML i CSS:

1. Koristite <img> element sa atributima srcset i sizes, kako bi pretraživač odabrao odgovarajuću veličinu slike u zavisnosti od veličine ekrana:

<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="Opis slike">

2. Koristite CSS za ograničenje maksimalne širine slike:

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

3. Takođe se mogu koristiti moderni formati slika (WebP, AVIF) za smanjenje veličine fajlova.

Na ovaj način, pretraživač na mobilnom uređaju će preuzeti optimalnu veličinu fajla, što će poboljšati performanse i smanjiti saobraćaj.