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.
![dwa zrzuty ekranu; pierwszy pokazuje obraz, który rozwija się poza szerokość przeglądarki. drugi pokazuje ten sam obraz ograniczony w widocznym obszarze przeglądarki.](https://web.dev/static/learn/design/responsive-images/image/two-screenshots-first-s-fbd980b13ed58.png?authuser=9&hl=pl)
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.
![Profil szczęśliwego przystojnego psa z piłką w pysku, ale zdjęcie jest ściśnięte.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-6886fa1061908.jpg?authuser=9&hl=pl)
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;
}
![Profil szczęśliwego przystojnego psa z piłką w pysku. po obu stronach obrazu jest dodatkowe miejsce.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-19f229b25e797.jpg?authuser=9&hl=pl)
![Profil szczęśliwego przystojnego psa z piłką w pysku. Obraz został przycięty u góry i u dołu.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-9a3c6aedc16d2.jpg?authuser=9&hl=pl)
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;
}
![Profil szczęśliwego przystojnego psa z piłką w pysku. Obraz został przycięty tylko na dole.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-a9de08840e85f.jpg?authuser=9&hl=pl)
object-position
tak, aby przycinał
tylko z jednej strony obrazu.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.
![Dwie wersje tego samego zdjęcia szczęśliwego, przystojnego psa z piłką w pysku: jedno zdjęcie wygląda na wyraziste, a drugie niewyraźne.](https://web.dev/static/learn/design/responsive-images/image/two-versions-the-same-im-f13b154ee2cc8.png?authuser=9&hl=pl)
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.
Aby obrazy zmieściły się w widocznym obszarze, musisz dodać style.
Gdy wysokość i szerokość obrazu zostaną wymuszone na niewłaściwym współczynniku proporcji, jakie style pomogą dopasować obraz do tych proporcji?
object-fit
contain
i cover
.image-fit
fit-image
aspect-ratio
Umieszczenie atrybutów height
i width
w obrazach uniemożliwia CSSowi zmianę ich stylu.
Atrybut srcset
nie _______ atrybutu src
, ale _______ go.
srcset
na pewno nie zastępuje atrybutu src
.Brakujący atrybut alt
na obrazie odpowiada pustemu atrybutowi alt
.
alt
informuje czytnik ekranu, że dany obraz ma charakter prezentacji.alt
nie sygnalizuje czytnikowi ekranu.