Obrazy elastyczne

Tekst w internecie jest automatycznie zawijany z krawędziami ekranu, overflow. Z kolei obrazy mają naturalny rozmiar. Jeśli obraz jest jest szerszy niż ekran, obraz wychodzi i użytkownik musi go przewinąć w poziomie, aby zobaczyć wszystko.

Na szczęście CSS zapewnia narzędzia, które to zapobiegają.

Ograniczanie obrazów

W arkuszu stylów możesz użyć: max-inline-size zadeklarować, że nie można renderować obrazów o rozmiarze większym niż zawierającym element.

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

Tę samą regułę możesz stosować do innych rodzajów treści umieszczanych na stronie, na przykład filmów. i elementy iframe.

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

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

Dodawanie block-size auto oznacza, że przeglądarka zachowuje zdjęcia z jakimś powoduje zmianę rozmiaru.

Czasami wymiary obrazu są ustalane przez system zarządzania treścią (CMS) lub za pomocą innego systemu dostawy treści. Jeśli projekt wymaga innego formatu obrazu z domyślnej wartości CMS, możesz użyć aspect-ratio w celu zachowania projektu witryny:

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

Niestety często oznacza to, że przeglądarka musi go zmniejszyć lub rozciągnąć. aby zmieścił się w odpowiedniej przestrzeni.

Aby zapobiec ściśnięciu i rozciąganiu, używaj object-fit.

Wartość contain object-fit informuje przeglądarkę, że ma zachować format obrazu, pozostawiając w razie potrzeby puste miejsce.

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

Wartość cover object-fit informuje przeglądarkę, że ma zachować format obrazu i w razie potrzeby przycięcie go.

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

.

.

Położenie przycięcia obrazu możesz zmienić za pomocą object-position usłudze. Spowoduje to dostosowanie ostrości przycięcia, czy istotny fragment obrazu jest nadal widoczny.

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 określają sposób renderowania obrazów. Dostępne opcje podaj też w kodzie HTML wskazówki dotyczące obsługi tych obrazów przez przeglądarkę.

Wskazówki dotyczące dobierania rozmiaru

Jeśli znasz wymiary obrazu, zawsze stosuj atrybuty width i height . Nawet jeśli obraz jest renderowany w innym rozmiarze z powodu max-inline-size, przeglądarka nadal zna stosunek szerokości do wysokości i która zapewni Ci odpowiednią ilość miejsca. Spowoduje to, że inne treści nie będą i przeskakiwać po załadowaniu obrazu.

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

Wskazówki dotyczące wczytywania

Użyj atrybutu loading, aby poinformować przeglądarkę, czy opóźnić wczytywanie aż znajdzie się w widocznym obszarze lub w jego pobliżu. W przypadku obrazów w części strony widocznej po przewinięciu użyj wartości z lazy. Przeglądarka nie będzie wczytywać leniwych obrazów, dopóki użytkownik nie przewinie strony na tyle, że obraz znajdzie się za chwilę. Jeśli użytkownik nigdy przewija się, obraz się nie wczytuje.

<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 ma stosowany atrybut loading="lazy", zwykle loading ma wartość domyślna wartość eager, która uniemożliwia leniwe ładowanie 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, np. obrazu LCP, możesz dokładniej ustaw priorytet ładowania przy użyciu Priorytetu pobierania, ustawianie atrybutu 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 pobierze obraz jak najszybciej i z wysokim priorytetem, zamiast czekać, aż przeglądarka zakończy układ i pobierze i obrazy w zwykły sposób.

Gdy jednak poprosisz przeglądarkę, aby w pierwszej kolejności pobierała jeden zasób, taki jak obrazu, przeglądarka musi zmniejszyć priorytet innego zasobu, takiego jak skrypt czy . Umieść atrybut fetchpriority="high" w obrazie tylko wtedy, gdy jest on naprawdę ważny.

Wskazówki dotyczące wstępnego wczytywania

Gdy tylko jest to możliwe, unikaj wstępnego wczytywania, umieszczając wszystkie obrazy w parametrze początkowym pliku HTML. Niektóre obrazy (np. obrazy) mogą być jednak niedostępne dodany przez JavaScript lub obraz tła CSS.

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

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

Należy też stosować je z umiarem, aby nie zastąpiły które zbyt często traktują heurystykę priorytetowo. Nadużywanie ich może spowodować obniżenie skuteczności z powodu jego pogorszenia.

Niektóre przeglądarki obsługują wstępne ładowanie obrazów elastycznych w oparciu o 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 kreację zastępczą href, możesz mieć pewność, że przeglądarki bez srcset zespół pomocy nadal będzie wstępnie wczytywał prawidłowy obraz.

Nie możesz wstępnie wczytywać obrazów w różnych formatach w zależności od tego, czy przeglądarka obsługuje w określonych formatach. Próba pobrania tego skutków może spowodować pobieranie dodatkowych plików, niepotrzebnie zużywając i skalowalnych danych.

Dekodowanie obrazu

Istnieje też atrybut decoding, który możesz dodać do elementów img. Dzięki temu można stwierdzić aby obraz mógł być asynchronicznie dekodowany, by nadać priorytet przetwarzania innych treści.

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

Wartości sync możesz użyć, jeśli obraz jest najważniejszym elementem które mają być traktowane priorytetowo.

<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 to wpływ tylko wtedy, gdy przeglądarka czeka na dekodowanie obrazu przed renderowanie innych treści.

W większości przypadków nie ma to większego wpływu, ale czasem może pozwolić przeglądarka nieco szybciej wyświetla obraz lub inne treści. Na przykład w przypadku adresu duży dokument z wieloma elementami, których renderowanie wymaga czasu, których dekodowanie trwa zbyt długo, ustawienie sync dla ważnych obrazów przeglądarka może poczekać na obraz i wyrenderować oba obrazy jednocześnie. Ewentualnie możesz skonfigurować async, aby przeglądarka wyświetlała treści szybciej i bez i czekam na zdekodowanie obrazu.

Lepszym rozwiązaniem jest zwykle jednak spróbować unikaj nadmiernego rozmiaru DOM i używaj elastycznych obrazów, aby skrócić czas dekodowania, zamiast korzystać z decoding.

Obrazy elastyczne zawierające element srcset

Dzięki deklaracji max-inline-size: 100% Twoje obrazy nie mogą zostać wyodrębnione swoich kontenerów. Jeśli jednak użytkownik korzysta z małego ekranu i ma niską przepustowość, przez sieć, co umożliwia pobieranie obrazów o tym samym rozmiarze co użytkownicy z większymi ekranami. danych na temat śmieci.

Aby rozwiązać ten problem, dodaj wiele wersji tego samego obrazu w różnych rozmiarach. i korzystaj z narzędzia srcset aby poinformować przeglądarkę o tym, że te rozmiary występują i kiedy mają być używane.

Deskryptor szerokości

Pole srcset możesz zdefiniować, rozdzielając przecinkami listę wartości. Każda wartość jest adres URL obrazu, po którym następuje spacja, a po nim metadane dotyczące tzw. deskryptor.

W tym przykładzie metadane opisują szerokość każdego obrazu za pomocą parametru w . Jeden 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, zamiast go zastąpić. Musisz mieć prawidłowy atrybut src, ale przeglądarka może zastąpić jego atrybut jedną z opcji wymienionych w kolumnie srcset. Aby oszczędzać przepustowość, pobiera większy obraz tylko wtedy, gdy jest potrzebny.

Rozmiary

Jeśli używasz deskryptora szerokości, musisz też użyć atrybutu sizes . Informuje ona przeglądarkę, jaki rozmiar obraz będzie wyświetlany w różnych warunkach. Te wartości są określone w zapytaniu o media.

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

<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 ponad 66em, obraz powinien być wyświetlany w rozmiarze nie szerszym niż 1/3 ekranu (np. w układzie trzykolumnowym).

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

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

Oznacza to, że największe zdjęcie nie musi być używane w najszerszym ekranu. Szerokie okno przeglądarki, które może wyświetlić układ wielokolumnowy, używa mieszczącą się w jednej kolumnie, która może być mniejsza niż obraz używany w układ jednokolumnowy na węższym ekranie.

Deskryptor gęstości pikseli

Możesz też użyć deskryptorów, by udostępnić alternatywną wersję obrazów do na wyświetlaczach o dużej gęstości, aby zapewnić ostrość obrazu i rozwiązywania problemów.

Użyj deskryptora gęstości, aby opisać gęstość pikseli na obrazie w odniesieniu do obrazu w atrybucie src. Deskryptor gęstości to liczba po którym następuje litera x, na przykład 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, po nim medium-image.png może mieć wartość 2x w Lista srcset.

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

obrazy do prezentacji;

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

Jeśli umieścisz w filmie obraz, który ma charakter dekoracyjny, ale nie zawiera żadnego treści, możesz użyć pustego atrybutu alt.

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

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

Najlepiej, gdyby obrazy prezentacji lub dekoracje były zawarte w CSS, a nie HTML. HTML służy do określania struktury. CSS służy do prezentacji.

Obrazy tła

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

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

Możesz określić wiele kandydatów na obrazy za pomocą metody image-set dla funkcji background-image.

Funkcja image-set w kodzie CSS działa bardzo podobnie do atrybutu 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 ekranie urządzenia.

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

• Zarezerwowanie odpowiedniej przestrzeni dla każdego obrazu.
• Ustalam, ile rozmiarów potrzebujesz.
• określanie, czy obraz ma charakter graficzny, czy dekoracyjny.

Warto poświęcić czas na odpowiednie przygotowanie zdjęć. Nieodpowiednie strategie dotyczące obrazów mogą irytować i irytować użytkowników. Dobra strategia dotycząca obrazów sprawi, że witryna będzie wyglądać lepiej obraz jest wyraźny i wyraźny niezależnie od urządzenia czy połączenia sieciowego użytkownika.

W pakiecie narzędzi HTML jest jeszcze jeden element HTML, który daje większą kontrolę obrazy: element picture.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o obrazach.