Obrazy responsywne

Wstęp

Tekst na stronie automatycznie zawija się na krawędzi ekranu, aby się nie przepełniał. Z obrazami jest inaczej, ponieważ obrazy mają wewnętrzny rozmiar. W przypadku, gdy obraz jest szerszy niż ekran, widok przepełni się, powodując pojawienie się poziomego paska przewijania.

Najprostszym rozwiązaniem, by dopasować obraz do ekranu lub kontenera jest poniższy kod:

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

lub bardziej nowocześnie:

img {
  max-inline-size: 100%;
  block-size: auto;
}

Oba przykłady są absolutną podstawą, jeśli chodzi o obrazy responsywne na stronie.

Proporcje obrazu

Dodanie wartości block-size: auto oznaczać będzie stałe (domyślne) proporcje obrazu. W przypadku jednak chcemy zdefiniować proporcje obrazu możemy skorzystać z własności aspect-ratio, o czym pisałem jakiś czas temu.

Oto przykład zastosowania:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16/9;
}

Niestety jest to rozwiązanie ryzykowne, gdyż przeglądarka może zniekształcić obraz rozciągając go lub spłaszczając.

Dopasowanie

Z pomocą przychodzi nam także właściwość object-fit i 2 wartości, które będą nas interesować.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

Wartość object-fit: cover dopasuje nam obraz względem szerokości kontenera, natomiast object-fit: contain dopasuje względem wysokości.

W przypadku, gdy pozycja dopasowania nie odpowiada nam, mamy możliwość jej zdefiniowania za pomocą object-position: top center.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: top center;
}

Inne metody na obrazy responsywne

Podstawową metodą do wykorzystania przy RWD obrazów jest atrybut srcset w HTML. Definiujemy w nim jaki obraz ma zostać załadowany przy jakiej wielkości ekranu. Jest to bardzo pomocne, w przypadku dużych obrazów gdzie zależy nam na zachowaniu jakości. Nie musimy wtedy zamieszczać obrazu FullHD na urządzeniach mobilnych. Oto jak użyć tego rozwiązania:

<img
 src="landscape-image.jpg"
 alt="A description of the image."
 loading="lazy"
 srcset="landscape-image_small.jpg 300w, landscape-image_medium.jpg 600w, landscape-image_full.jpg 1200w"
>

W tym przykładzie oczywiście definiujemy artybut src, jednak poza można dodać srcset. Przeglądarka wtedy wie, że powinna załadować obraz landscape-image_small.jpg dla ekranu mniejszego niż 300w (jednostka „w” jest tożsama z „px”). Analogicznie dla pozostałych obrazów zdefiniowanych w srcset.

Można użyć także rozwiązania w postaci atrybutu sizes.

Dynamiczne ładowanie obrazów

Temat obrazów responsywnych poniekąd zawiera także zagadnienie ładowania obrazów. W tym celu używamy atrybutu loading, aby poinformować przeglądarkę, kiedy dany obraz ma zostać załadowany.

Rozróżniamy dwie metody ładowania obrazów: eager, czyli natychmiast po załadowaniu strony oraz lazy, asynchronicznie w momencie gdy obraz będzie potrzebny do wyświetlenia lub gdy użytkownik przewinie stronę do danego obrazu.

<img
 src="landscape-image.jpg"
 alt="A description of the image."
 loading="lazy"
>