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.
img {
max-inline-size: 100%;
block-size: auto;
}
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.
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.
Aby zapobiec ścisaniu i rozciąganiu, używaj właściwości object-fit
.
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;
}
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.
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ę 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"
>
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"
>
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.
<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.
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.
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
.
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.
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.
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
contain
i cover
.image-fit
fit-image
aspect-ratio
Jeśli umieścisz w obrazach atrybuty height
i width
, CSS nie będzie mógł ich zmieniać.
Atrybut srcset
nie _______ atrybutu src
, _______ go.
srcset
z pewnością nie zastępuje atrybutu src
.Brak elementu alt
na obrazie jest równoznaczny z brakiem elementu alt
.
alt
informuje czytnik ekranu, że obraz jest prezentacyjny.alt
nie zgłasza żadnych sygnałów dla czytnika ekranu.