Obrazy elastyczne

Tekst na stronie internetowej automatycznie zawija się do krawędzi ekranu, dzięki czemu nie jest poza nim. Obrazy mają natomiast niepowtarzalny rozmiar. Jeśli obraz jest szerszy niż ekran, przepełnia się i użytkownik musi przewinąć ekran w poziomie, aby zobaczyć całość.

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

Ograniczanie zdjęć

W arkuszu stylów możesz użyć funkcji max-inline-size, aby zadeklarować, że obrazy nigdy nie będą renderowane w rozmiarze szerszym niż ich element, który zawiera.

Obsługa przeglądarek

• 57
• 79
• 41
• 12.1

Źródło

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

Uwaga: zamiast max-inline-size możesz użyć właściwości max-width, ale zalecamy przyzwyczajenie się do myślenia w kontekście właściwości logicznych.

Możesz zastosować tę samą regułę do innych rodzajów umieszczonych treści, np. filmów i elementów iframe.

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

Gdy ta reguła jest stosowana, przeglądarki automatycznie zmniejszają obrazy w dół, aby pasowały do ekranu.

Jeśli zablokujesz obraz, użytkownicy będą mogli zobaczyć go w całości bez przewijania.

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

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

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

Często oznacza to, że przeglądarka musi zciskać lub rozciągnąć obraz, aby pasował do potrzebnej przestrzeni.

Zmiana formatu obrazu powoduje, że obraz jest ściśnięty lub rozciągnięty.

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

Obsługa przeglądarek

• 32
• 79
• 36
• 10

Źródło

Wartość object-fit wynosząca contain informuje przeglądarkę, że ma zachować współczynnik proporcji obrazu, pozostawiając w razie potrzeby puste miejsce.

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

Wartość object-fit wynosząca cover informuje przeglądarkę, że ma zachować współczynnik proporcji obrazu i w razie potrzeby ją przyciąć.

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

Ten sam obraz z 2 różnymi wartościami parametru „object-fit”. Pierwsza ma wartość „object-fit” o wartości „contain”. Drugi ma wartość „cover” dla atrybutu „object-fit”.

Położenie przycięcia obrazu możesz zmienić za pomocą właściwości object-position. Spowoduje to dostosowanie ostrości przycięcia, dzięki czemu najważniejsza część obrazu będzie nadal widoczna.

Obsługa przeglądarek

• 32
• 79
• 36
• 10

Źródło

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

Możesz skonfigurować object-position tak, aby przycinał tylko jedną stronę obrazu.

Przesyłanie obrazów

Te reguły CSS informują przeglądarkę o sposobie renderowania obrazów. W kodzie HTML możesz też umieścić wskazówki dotyczące obsługi tych obrazów przez przeglądarkę.

Wskazówki dotyczące rozmiaru

Jeśli znasz wymiary obrazu, zawsze dodawaj atrybuty width i height. Nawet wtedy, gdy obraz jest renderowany w innym rozmiarze ze względu na regułę max-inline-size, przeglądarka zna stosunek szerokości do wysokości i może przeznaczyć odpowiednią ilość miejsca. Dzięki temu inne treści nie będą przeskakiwać podczas wczytywania obrazu.

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

Pierwszy film przedstawia układ bez zdefiniowanych wymiarów obrazu. Zwróć uwagę na to, że tekst skacze podczas wczytywania obrazów. W drugim filmie podano wymiary obrazu, więc przeglądarka pozostawia miejsce na obraz, a tekst nie skacze po wczytaniu obrazu.

Wskazówki dotyczące wczytywania

Atrybut loading pozwala wskazać przeglądarce, czy ma opóźnić wczytywanie obrazu do momentu, gdy znajdzie się on w widocznym obszarze 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 wczytuje leniwych obrazów, dopóki użytkownik nie przewinie strony na tyle daleko, aby obraz mógł stać się widoczny. Jeśli użytkownik nigdy nie przewinie strony, obraz się nie wczyta.

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

Leniwe ładowanie obrazów czeka na wczytanie, aż użytkownik za chwilę je przewinie.

W przypadku banera powitalnego w części strony widocznej na ekranie nie stosuj loading. Jeśli Twoja witryna automatycznie stosuje atrybut loading="lazy", zwykle możesz ustawić loading na wartość domyślną 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 zwiększyć priorytet wczytywania 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"
>

Sprawi to, że przeglądarka powinna pobrać obraz od razu, z wysokim priorytetem, zamiast czekać, aż zakończy się jego układ i będzie pobierać obrazy w zwykły sposób.

Jeśli jednak poprosisz przeglądarkę, aby priorytetowo pobierała jeden zasób, np. obraz, musi obniżyć priorytet innego zasobu, takiego jak skrypt lub plik czcionek. Ustaw wartość fetchpriority="high" w przypadku obrazu tylko wtedy, gdy jest naprawdę istotny.

Wskazówki dotyczące wstępnego wczytywania

Jeśli to możliwe, najlepiej unikać wstępnego wczytywania, dodając wszystkie obrazy do początkowego pliku HTML. Jednak niektóre obrazy (np. dodane przez JavaScript lub obraz tła CSS) mogą być niedostępne.

Możesz użyć wstępnego wczytywania, aby pobrać te ważne obrazy przez przeglądarkę z wyprzedzeniem. W przypadku bardzo ważnych obrazów możesz połączyć wstępne wczytywanie za pomocą atrybutu fetchpriority:

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

Także tych atrybutów należy używać z umiarem, aby uniknąć zbyt częstego zastępowania heurystyki priorytetu w przeglądarce. Nadużywanie ich może zmniejszyć wydajność.

Niektóre przeglądarki obsługują wstępne wczytywanie obrazów elastycznych na podstawie parametru srcset z wykorzystaniem 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 kreację zastępczą href, możesz mieć pewność, że przeglądarki bez obsługi srcset nadal będą wstępnie wczytywać odpowiedni obraz.

Nie można wstępnie wczytywać obrazów w różnych formatach w zależności od tego, czy dany format jest obsługiwany przez przeglądarkę. Może to spowodować pobieranie dodatkowych plików, co zmarnuje dane użytkowników.

Dekodowanie obrazu

Dostępny jest też atrybut decoding, który możesz dodać do elementów img. Możesz poinformować przeglądarkę, że obraz może być asynchronicznie dekodowany, co pozwoli na priorytetowe traktowanie innych treści.

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

Możesz użyć wartości sync, jeśli sam obraz jest najważniejszym elementem treści, na którym należy priorytetyzować.

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

Atrybut decoding nie zmienia szybkości dekodowania obrazu. Ma ona wpływ tylko na to, czy przeglądarka czeka na dekodowanie tego obrazu przed wyrenderowaniem innych treści.

W większości przypadków nie ma to dużego wpływu, ale czasami może umożliwić przeglądarce szybsze wyświetlanie obrazu lub innych treści. Na przykład w przypadku dużego dokumentu z wieloma elementami, których renderowanie trwa długo, a także w przypadku dużych obrazów, których dekodowanie trwa długo, ustawienie sync na ważnych obrazach sprawia, że przeglądarka będzie czekać na obraz i wyrenderować oba elementy jednocześnie. Możesz też skonfigurować async, aby przeglądarka wyświetlała treści szybciej i nie czekała na zdekodowanie obrazu.

Jednak lepszym rozwiązaniem jest zwykle unikanie nadmiernego rozmiaru DOM i korzystanie z obrazów elastycznych w celu skrócenia czasu dekodowania zamiast użycia atrybutu decoding.

Obrazy elastyczne z wykorzystaniem srcset

Dzięki deklaracji max-inline-size: 100% Twoje obrazy nie mogą wyjść poza kontenery. Jeśli jednak użytkownik ma mały ekran i ma małą przepustowość, będzie pobierać obrazy o tym samym rozmiarze co użytkownicy z większymi ekranami.

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 dany rozmiar istnieje i kiedy należy go używać.

Deskryptor szerokości

Pole srcset możesz zdefiniować przy użyciu listy wartości rozdzielonych przecinkami. Każda wartość to adres URL obrazu, po którym następuje spacja, a po niej określone metadane obrazu, czyli deskryptor.

W tym przykładzie metadane opisują szerokość każdego obrazu za pomocą jednostki w. Jeden w to szerokość jednego 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, zamiast go zastąpić. Nadal musisz mieć prawidłowy atrybut src, ale przeglądarka może zastąpić jego wartość jedną z opcji wymienionych w srcset. Aby oszczędzać przepustowość, przeglądarka pobiera tylko większe obrazy, jeśli zajdzie taka potrzeba.

Rozmiary

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

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

Uwaga: obecność w elemencie HTML zapytań o media CSS może wydawać się dziwna. która oddziela prezentację od struktury. To jednak jedyny sposób, aby szybko dostarczyć potrzebne informacje o rozmiarze, bez względu na skuteczność

<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 widocznym obszarze o szerokości większej niż 66em powinien on wyświetlać obraz nie szerszy niż 1/3 ekranu (np. w układzie trzykolumnowym).

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

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

Oznacza to, że na najszerszy ekran niekoniecznie będzie wybrany największy obraz. Szerokie okno przeglądarki, które może wyświetlać układ wielokolumnowy, korzysta z obrazu mieszczącego się w jednej kolumnie. Może on być mniejszy niż obraz używany w układzie jednokolumnowym na węższym ekranie.

Używaj deskryptorów rozmiaru, aby zmieniać sposób umiejscowienia strony na ekranach o różnych rozmiarach.

Deskryptor gęstości pikseli

Możesz też używać deskryptorów, aby zapewnić alternatywną wersję obrazów do wyświetlania na wyświetlaczach o wysokiej rozdzielczości, aby były ostre i wyglądały w wyższej rozdzielczości.

Obrazy o mniejszej gęstości pikseli mogą być nieostre.

Użyj deskryptora gęstości, aby opisać gęstość pikseli obrazu w związku z obrazem w atrybucie src. Deskryptor gęstości to liczba, po której następuje litera x, jak w 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 wymiary 300 x 200 pikseli, a medium-image.png to 600 x 400 pikseli, za elementem medium-image.png może znajdować się 2x.srcset

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

Uwaga: możesz używać albo deskryptorów szerokości, albo deskryptorów gęstości, ale nie obu naraz.

Obrazy do prezentacji

Obrazy w kodzie HTML są treścią. Dlatego warto dodać atrybut alt z opisem obrazu dla czytników ekranu i wyszukiwarek.

Jeśli umieścisz obraz, który pełni funkcję dekoracyjną, ale nie zawiera żadnej treści, możesz użyć pustego atrybutu alt.

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

Zawsze musisz uwzględnić atrybut alt, nawet jeśli jest pusty. Pusty atrybut alt informuje czytnik ekranu, że obraz jest prezentowany. Brakujący atrybut alt nie dostarcza tych informacji.

Najlepiej, gdyby obrazy prezentacyjne lub dekoracyjne były zawarte w arkuszu CSS zamiast w HTML. Kod HTML służy do tworzenia struktury. CSS służy do prezentacji.

Wskazówka: dowiedz się, jak tworzyć obrazy z ułatwieniami dostępu.

Obrazy tła

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

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

Za pomocą funkcji image-set w polu background-image możesz określić więcej niż jedną grafikę.

Funkcja image-set w CSS działa podobnie jak atrybut srcset w kodzie HTML. Podaj listę obrazów z deskryptorem 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 najlepiej pasujący do gęstości pikseli na urządzeniu.

Dodając obrazy do witryny, musisz wziąć pod uwagę wiele czynników, w tym:

• Zarezerwowanie odpowiedniej przestrzeni na każdy obraz.
• Ustalam, ile rozmiarów potrzebujesz
• Zdecyduj, czy obraz pełni rolę treści, czy jest elementem dekoracyjnym.

Warto poświęcić trochę czasu na poprawienie jakości swoich zdjęć. Kiepskie strategie dotyczące obrazu mogą denerwować i frustrować użytkowników. Dobra strategia dotycząca obrazów sprawia, że strona wygląda chwytliwie i ostrość niezależnie od urządzenia czy połączenia sieciowego użytkownika.

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

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o obrazach.

Aby obrazy pasowały do widocznego obszaru, należy dodać style.

Prawda

Obrazy, które nie zawierają takiej blokady, będą miały taki sam rozmiar, jak ich naturalny rozmiar.

Fałsz

Style są wymagane.

Wysokość i szerokość obrazu zostały ustawione na nienaturalny współczynnik proporcji. Które style mogą pomóc dostosować obraz do tych proporcji?

object-fit

Określ sposób dopasowania obrazu do słów kluczowych takich jak contain i cover.

image-fit

Ta właściwość nie istnieje, wymyślona przeze mnie.

fit-image

Ta właściwość nie istnieje, wymyślona przeze mnie.

aspect-ratio

Może to spowodować lub rozwiązać problem z nienaturalnym formatem obrazu.

Jeśli umieścisz w obrazach atrybuty height i width, CSS nie będzie mógł ich zmieniać.

Prawda

Potraktuj je raczej jak wskazówki niż reguły.

Fałsz

CSS oferuje dużą liczbę dynamicznych opcji zmiany rozmiaru obrazów, nawet jeśli wysokość i szerokość są wbudowane w tag.

Atrybut srcset nie _______ atrybutu src, _______ go.

uzupełnia, zastępuje

srcset z pewnością nie zastępuje atrybutu src.

zastępować, uzupełnia

Jeśli to możliwe, przeglądarka ma do wyboru dodatkowe opcje.

Brak elementu alt na obrazie jest równoznaczny z brakiem elementu alt.

Prawda

Pusty atrybut alt informuje czytnik ekranu, że obraz jest prezentacyjny.

Fałsz

Brak sygnału alt nie zgłasza żadnych sygnałów dla czytnika ekranu.