Jak sprawić, aby obraz ładował się w zmniejszonym rozmiarze na urządzeniach mobilnych?

Aby ładować obrazy w zmniejszonym rozmiarze na urządzeniach mobilnych, używa się obrazów adaptacyjnych za pomocą HTML i CSS:

1. Użyj elementu <img> z atrybutami srcset i sizes, aby przeglądarka wybierała odpowiedni rozmiar obrazu w zależności od rozmiaru ekranu:

<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 obrazu">

2. Użyj CSS, aby ograniczyć maksymalną szerokość obrazu:

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

3. Możesz także stosować nowoczesne formaty obrazów (WebP, AVIF), aby zmniejszyć rozmiar plików.

W ten sposób przeglądarka na urządzeniu mobilnym pobierze plik optymalnego rozmiaru, co poprawi wydajność i zmniejszy ruch sieciowy.