Obrazy elastyczne

Tekst w internecie automatycznie zawija się na krawędzi ekranu, dzięki czemu nie przekracza jego granic. Obrazy mają natomiast rozmiar wewnętrzny. Jeśli obraz jest szerszy niż ekran, wykracza poza niego i użytkownik musi przewijać go w poziomie, aby zobaczyć całość.

Na szczęście CSS udostępnia narzędzia, które temu zapobiegają.

Ograniczanie obrazów

W arkuszu stylów możesz użyć max-inline-size, aby zadeklarować, że obrazy nigdy nie mogą być renderowane w rozmiarze szerszym niż element zawierający.

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

Tę samą regułę możesz zastosować też do innych rodzajów treści umieszczonych na stronie, np. filmów i elementów iframe.

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

Dzięki tej regule przeglądarki automatycznie zmniejszają rozmiar obrazów, aby dopasować je do ekranu.

Dodanie wartości block-size auto oznacza, że przeglądarka zachowuje współczynnik proporcji obrazu podczas zmiany rozmiaru obrazów.

Czasami wymiary obrazu są ustawiane przez system zarządzania treścią (CMS) lub inny system dostarczania treści. Jeśli projekt wymaga innego współczynnika proporcji niż domyślny w systemie CMS, możesz użyć właściwości aspect-ratio, aby zachować wygląd witryny:

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

Niestety często oznacza to, że przeglądarka musi skompresować lub rozciągnąć obraz, aby dopasować go do zamierzonego miejsca.

Aby zapobiec rozciąganiu i ściskaniu, użyj właściwości object-fit.

Wartość object-fit równa contain informuje przeglądarkę, że ma zachować proporcje obrazu, pozostawiając w razie potrzeby puste miejsce wokół niego.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Wartość object-fit równa cover informuje przeglądarkę, aby zachowała proporcje obrazu, przycinając go w razie potrzeby.

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

Położenie wykadrowanego obrazu możesz zmienić za pomocą właściwości object-position. Dzięki temu możesz dostosować punkt fokalny przycięcia, aby mieć pewność, że najważniejsza część obrazu będzie nadal widoczna.

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

Przesyłanie obrazów

Te reguły CSS informują przeglądarkę, jak mają być renderowane obrazy. W kodzie HTML możesz też podać wskazówki dotyczące tego, jak przeglądarka powinna obsługiwać te obrazy.

Wskazówki dotyczące rozmiaru

Jeśli znasz wymiary obrazu, zawsze uwzględniaj atrybuty width i height. Nawet jeśli obraz jest renderowany w innym rozmiarze z powodu reguły max-inline-size, przeglądarka nadal zna stosunek szerokości do wysokości i może zarezerwować odpowiednią ilość miejsca. Dzięki temu inne treści nie będą przeskakiwać, gdy obraz się załaduje.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Wskazówki dotyczące ładowania

Użyj atrybutu loading, aby poinformować przeglądarkę, czy ma opóźnić wczytywanie obrazu, dopóki nie znajdzie się on w obszarze widocznym lub w jego pobliżu. W przypadku obrazów w części strony widocznej po przewinięciu użyj wartości lazy. Przeglądarka nie będzie ładować obrazów leniwych, dopóki użytkownik nie przewinie strony na tyle daleko, aby obraz miał się pojawić. Jeśli użytkownik nigdy nie przewinie strony, obraz się nie załaduje.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

W przypadku banera powitalnego w części strony widocznej na ekranie nie używaj loading. Jeśli Twoja witryna automatycznie stosuje atrybut loading="lazy", możesz zwykle ustawić atrybut loading na domyślną wartość eager, aby zapobiec leniwemu ładowaniu obrazów:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Priorytet pobierania

W przypadku ważnych obrazów, takich jak obraz LCP, możesz dodatkowo nadać priorytet wczytywaniu za pomocą priorytetu pobierania, ustawiając atrybut fetchpriority na high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Dzięki temu przeglądarka od razu pobierze obraz z wysokim priorytetem, zamiast czekać, aż zakończy układ i pobierze obrazy w normalny sposób.

Gdy jednak poprosisz przeglądarkę o nadanie priorytetu pobieraniu jednego zasobu, np. obrazu, musi ona obniżyć priorytet innego zasobu, takiego jak skrypt lub plik czcionki. Atrybut fetchpriority="high" należy ustawiać tylko w przypadku naprawdę ważnych obrazów.

Wskazówki dotyczące wstępnego wczytywania

W miarę możliwości unikaj wstępnego wczytywania, umieszczając wszystkie obrazy w początkowym pliku HTML. Niektóre obrazy mogą być jednak niedostępne, np. obrazy dodane za pomocą JavaScriptu lub obraz tła CSS.

Możesz użyć wstępnego wczytywania, aby przeglądarka pobrała te ważne obrazy z wyprzedzeniem. W przypadku naprawdę ważnych obrazów możesz połączyć wstępne wczytywanie z atrybutem:fetchpriority

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Pamiętaj, aby używać tych atrybutów oszczędnie, aby nie zastępować zbyt często heurystyki priorytetyzacji przeglądarki. Nadmierne używanie wykluczających słów kluczowych może pogorszyć skuteczność.

Niektóre przeglądarki obsługują wstępne wczytywanie obrazów responsywnych na podstawie atrybutu srcset za pomocą atrybutów imagesrcset i imagesizes. Na przykład:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

Wykluczając href, możesz mieć pewność, że przeglądarki bez obsługi srcset będą wstępnie wczytywać prawidłowy obraz.

Nie możesz wstępnie wczytywać obrazów w różnych formatach w zależności od obsługi przeglądarki. Próba wykonania tej czynności może spowodować dodatkowe pobieranie danych, co wiąże się z ich marnowaniem.

Obrazy elastyczne z użyciem elementu srcset

Dzięki deklaracji max-inline-size: 100% obrazy nie mogą wykraczać poza swoje kontenery. Jeśli jednak użytkownik ma mały ekran i sieć o niskiej przepustowości, pobieranie przez niego obrazów o takim samym rozmiarze jak w przypadku użytkowników z większymi ekranami powoduje marnowanie danych.

Aby rozwiązać ten problem, dodaj kilka wersji tego samego obrazu w różnych rozmiarach i użyj atrybutu srcset, aby poinformować przeglądarkę, że te rozmiary istnieją i kiedy należy ich używać.

Opis szerokości

Możesz zdefiniować srcset za pomocą listy wartości rozdzielonych przecinkami. Każda wartość to adres URL obrazu, po którym następuje spacja i metadane obrazu, czyli deskryptor.

W tym przykładzie metadane opisują szerokość każdego obrazu za pomocą jednostki w. 1 w to szerokość 1 piksela.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

Atrybut srcset uzupełnia atrybut src, a nie go zastępuje. Nadal musisz mieć prawidłowy atrybut src, ale przeglądarka może zastąpić jego wartość jedną z opcji wymienionych w atrybucie srcset. Aby oszczędzać przepustowość, przeglądarka pobiera większy obraz tylko wtedy, gdy jest on potrzebny.

Rozmiary

Jeśli używasz deskryptora szerokości, musisz też użyć atrybutu sizes , aby przekazać przeglądarce więcej informacji. Informuje to przeglądarkę, w jakim rozmiarze ma wyświetlać obraz w różnych warunkach. Te warunki są określone w zapytaniu o multimedia.

Atrybut sizes przyjmuje listę rozdzieloną przecinkami zapytań o media i szerokości obrazów.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

W tym przykładzie informujesz przeglądarkę, że w obszarze widoku o szerokości powyżej 66em obraz powinien być wyświetlany nie szerzej niż 1/3 ekranu (np. w układzie 3-kolumnowym).

W przypadku szerokości widocznego obszaru od 44em do 66em wyświetlaj obraz na połowie szerokości ekranu (jak w układzie dwukolumnowym).

W przypadku elementów węższych niż 44em obraz powinien być wyświetlany na całej szerokości ekranu.

Oznacza to, że największy obraz niekoniecznie będzie używany na najszerszym ekranie. W przypadku szerokiego okna przeglądarki, w którym można wyświetlić układ wielokolumnowy, używany jest obraz mieszczący się w jednej kolumnie, który może być mniejszy niż obraz używany w układzie jednokolumnowym na węższym ekranie.

Opis gęstości pikseli

Możesz też używać deskryptorów, aby udostępniać alternatywną wersję obrazów do wyświetlania na ekranach o dużej gęstości pikseli. Dzięki temu obrazy będą wyglądać ostro w wyższych rozdzielczościach.

Użyj deskryptora gęstości, aby opisać gęstość pikseli obrazu w odniesieniu do obrazu w atrybucie src. Deskryptor gęstości to liczba z literą x, np. 1x lub 2x.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Jeśli small-image.png ma rozmiar 300 x 200 pikseli, a medium-image.png ma rozmiar 600 x 400 pikseli, to medium-image.png może występować po 2x na liście srcset.

Nie musisz używać liczb całkowitych. Jeśli inna wersja obrazu ma wymiary 450 x 300 pikseli, możesz ją opisać za pomocą 1.5x.

Obrazy prezentacyjne

Obrazy w HTML-u są treścią. Dlatego dodajesz atrybut alt z opisem obrazu dla czytników ekranu i wyszukiwarek.

Jeśli osadzasz obraz, który ma charakter dekoracyjny i nie zawiera żadnych istotnych treści, możesz użyć pustego atrybutu alt.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Atrybut alt musisz zawsze uwzględniać, nawet jeśli jest pusty. Pusty atrybut alt informuje czytnik ekranu, że obraz ma charakter prezentacyjny. Brak atrybutu alt nie dostarcza tych informacji.

Najlepiej, aby obrazy prezentacyjne lub dekoracyjne były dołączane za pomocą CSS zamiast HTML. HTML służy do tworzenia struktury. CSS służy do prezentacji.

Obrazy tła

Aby wczytywać obrazy prezentacyjne, użyj właściwości background-image w CSS.

element {
  background-image: url(flourish.png);
}

Możesz określić wiele kandydatów na obraz, używając funkcji image-set w przypadku background-image.

Funkcja image-set w CSS działa podobnie do atrybutu srcset w HTML. Podaj listę obrazów z opisem gęstości pikseli dla każdego z nich.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

Przeglądarka wybiera obraz najbardziej odpowiedni do gęstości pikseli na urządzeniu.

Podczas dodawania obrazów do witryny należy wziąć pod uwagę wiele czynników, w tym:

• zarezerwować odpowiednie miejsce na każdy obraz;
• Określanie liczby potrzebnych rozmiarów.
• Określanie, czy obraz jest treścią, czy elementem dekoracyjnym.

Warto poświęcić czas na dopracowanie zdjęć. Niewłaściwe strategie dotyczące obrazów mogą irytować i frustrować użytkowników. Dobra strategia dotycząca obrazów sprawia, że witryna działa szybko i wyświetla się w wysokiej jakości niezależnie od urządzenia użytkownika czy połączenia sieciowego.

W zestawie narzędzi masz jeszcze jeden element HTML, który daje większą kontrolę nad obrazami: element picture.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o obrazach.