obrazy dekoracyjne, np. gradienty tła przycisków lub obrazy tła w sekcjach treści lub na całej stronie; mają charakter prezentacyjny i powinny być stosowane w kodzie CSS. Obraz, który dodaje kontekst do dokumentu, ma charakter treści i powinien być umieszczonego za pomocą kodu HTML.
Główną metodą dołączania obrazów jest użycie tagu <img>
z tagiem src
odwołujący się do zasobu obrazu, i atrybut alt
opisujący obraz.
<img src="images/eve.png" alt="Eve">
Zarówno atrybut srcset
w elemencie <img>
, jak i element <picture>
umożliwiają dołączenie wielu źródeł obrazów za pomocą atrybutu
z powiązanymi zapytaniami o multimedia, z których każde zawiera zastępcze źródło obrazu, umożliwiając wyświetlanie najbardziej odpowiedniego pliku graficznego na podstawie
rozdzielczości, możliwości przeglądarki i rozmiaru widocznego obszaru. Atrybut srcset
umożliwia przesłanie wielu wersji obrazu
na podstawie rozdzielczości, a wraz z atrybutem sizes
– rozmiar widocznego obszaru przeglądarki.
<img src="images/eve.png" alt="Eve"
srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
sizes="(max-width: 800px) 400px, 800px" />
Możesz to też zrobić za pomocą elementu <picture>
oraz elementów podrzędnych <source>
, które domyślnie przyjmuje ustawienie <img>
.
<picture>
<source src="images/eve.png" media="(max-width: 800px)" />
<source src="images/eve-xl.jpg" />
<img src="images/eve.png" alt="Eve" />
</picture>
Oprócz tych wbudowanych metod tworzenia elastycznych obrazów HTML umożliwia też
wydajność renderowania za pomocą różnych atrybutów. tagu <img>
, a tym samym tagów przesyłania w formie graficznej <input type="image">
,
może zawierać atrybuty height
i width
, aby ustawić format obrazu w celu ograniczenia przesunięcia układu treści. Atrybut lazy
umożliwia leniwe ładowanie.
HTML umożliwia też uwzględnianie obrazów SVG bezpośrednio za pomocą interfejsu <svg>
, choć w formacie SVG
obrazy z rozszerzeniem .svg
(lub w postaci data-uri) można umieszczać za pomocą elementu <img>
.
Każdy obraz na pierwszym planie powinien zawierać co najmniej atrybuty src
i alt
.
Plik src
to ścieżka i nazwa pliku umieszczonego obrazu. Atrybut src
służy do podania adresu URL obrazu.
Następnie przeglądarka pobiera zasób i wyświetla go na stronie. Ten atrybut jest wymagany przez atrybut <img>
; bez tego nic nie ma
do wyrenderowania.
Atrybut alt
zawiera tekst alternatywny dla obrazu i opis obrazu dla osób, które nie widzą tego zdjęcia.
ekranu (wyszukiwarki i technologie wspomagające osoby z niepełnosprawnością, a nawet Alexę, Siri i Asystenta Google), który może być wyświetlany przez przeglądarkę
jeśli obraz się nie załaduje. Oprócz użytkowników, którzy korzystają z powolnych sieci lub mają ograniczoną przepustowość, tekst alt
jest bardzo przydatny w języku HTML.
e-maili, bo wielu użytkowników blokuje obrazy w aplikacjach pocztowych.
<img src="path/filename" alt="descriptive text" />
Jeśli obraz jest w formacie SVG, dodaj też atrybut role="img"
, który
jest konieczne ze względu na VoiceOver błędy.
<img src="switch.svg" alt="light switch" role="img" />
Tworzenie skutecznych opisów obrazów alt
Atrybuty Alt powinny być krótkie i zwięzłe, zawierające wszystkie istotne informacje przekazywane przez obraz, a jednocześnie pomijane informacje, które są zbędne w stosunku do innej zawartości dokumentu lub w inny sposób nie są przydatne. Pisząc tekst, ton powinien być odzwierciedlają styl witryny.
Aby utworzyć skuteczny tekst alternatywny, wyobraź sobie, że czytasz całą stronę osobie, która go nie widzi. Za pomocą
semantyczny element <img>
, użytkownicy czytników ekranu i boty będą wiedzieć,
że element jest obrazem. Użycie tekstu „To jest obraz/zrzut ekranu/zdjęcie” jest bezsensowne. w alt
. Użytkownik nie wyrazi zgody
wiedzą, że istnieje obraz, ale muszą wiedzieć, jakie informacje zawiera.
Zazwyczaj nie odpowiadałoby to sformułowaniu „To jest ziarniste zdjęcie psa w czerwonej czapce”. Trzeba pokazać, o czym jest obraz, przedstawianie w kontekście reszty dokumentu; i to, co podasz, będzie się zmieniać w zależności od kontekstu. i zawartości otaczającego tekstu.
Na przykład zdjęcie psa może być opisane na różne sposoby w zależności od kontekstu. Jeśli Kulka jest awatarem obok
opinii na temat karmy dla psów Yuckymeat, wystarczy alt="Fluffy"
.
Jeśli zdjęcie jest częścią strony adopcyjnej w witrynie schroniska dla zwierząt, grupą docelową będzie potencjalny pies.
elementu nadrzędnego. Tekst powinien opisywać informacje przedstawione na zdjęciu, które są istotne dla użytkownika i które nie są zduplikowane
w otaczającym tekście. Dłuższy opis, np. alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her
mouth"
, jest odpowiedni. Tekst na stronie o adopcji zawiera zwykle informacje o gatunku, rasie, wieku i płci zwierzęcia do adopcji.
więc nie trzeba go powtarzać w tekście alternatywnym. Ale w biografii psa nie ma prawdopodobnie długości włosów, kolorów,
czy preferencji dotyczących zabawek. Pamiętaj, że nie omówiliśmy zdjęcia: przyszły właściciel psa nie musi wiedzieć, czy pies jest
w pomieszczeniach i na zewnątrz albo z czerwoną obrożem i niebieską smyczą.
Jeśli używasz obrazów do tworzenia ikon, ponieważ atrybut alt
określa dostępną nazwę, przekazuj znaczenie ikony.
a nie opis obrazu. Na przykład atrybut alt ikony lupy to search
. Ikona, która wygląda
tak jak dom ma tekst alternatywny: home
. Opis ikony dyskietki 5-calowej: save
. Jeśli używane są 2 ikony Fluffy
aby wskazać sprawdzone metody i antywzorce, dla uśmiechniętego psa w zielonym berecie można było ustawić wartość alt="good"
, podczas gdy pies warczący
w czerwonym berecie może brzmieć alt="bad"
. Mimo to używaj tylko standardowych ikon, a jeśli używasz niestandardowych ikon, takich jak
tych dobrych i złych, należy dołączyć legendę i zadbać o to, aby ikony były jedynym sposobem na odszyfrowanie znaczenia elementów interfejsu użytkownika,
Jeśli obraz jest zrzutem ekranu lub wykresem, zamiast opisywać wygląd, napisz, czego można się z niego dowiedzieć. Choć obraz może być wart tysiąca słów, opis powinien zwięźle informować o wszystkim, czego się nauczysz.
Pomiń informacje, które użytkownik już zna z kontekstu i jest informowany o nich w treści. Przykład:
Jeśli jesteś na stronie samouczka dotyczącej zmiany ustawień przeglądarki, a strona dotyczy klikania ikon w Chrome, URL
widoczne na zrzucie ekranu. Ogranicz alt
do omawianego tematu – jak zmienić ustawienia. alt
może być
„Ikona ustawień znajduje się na pasku nawigacyjnym pod polem wyszukiwania”. Nie dodawaj „zrzutu ekranu” lub „warsztaty uczenia maszynowego”
ponieważ użytkownik nie musi wiedzieć, że jest to zrzut ekranu, i nie musi wiedzieć, gdzie użytkownik techniczny surfował po pisaniu tekstów.
zgodnie z instrukcjami. Opis obrazu wynika z kontekstu, w jakim przesłano obraz.
Jeśli zrzut ekranu pokazuje, jak znaleźć numer wersji przeglądarki na stronie chrome://version/
, podaj ten adres URL w polu
zawartość strony jako instrukcje, a w atrybucie alt należy podać pusty ciąg znaków, ponieważ obraz nie zawiera żadnych informacji
w otaczającym je tekście.
Jeśli zdjęcie nie zawiera żadnych dodatkowych informacji lub ma charakter czysto dekoracyjny, atrybut powinien nadal tam znajdować się, tak jakby był pustym ciągiem znaków.
<img src="svg/magazine.svg" alt="" role="none" />
Na stronie MachineLearningWorkshop.com znajduje się 7 obrazów na pierwszym planie, dlatego 7 obrazów z atrybutami alt: przełącznik światła w jajku wielkanocnym, ikonę ręczną, dwa zdjęcia biograficzne Hala i Ewy oraz 3 awatary miksera, odkurzacza i tostera. czysto ozdobny obraz na pierwszym planie, który wygląda jak czasopismo. Strona zawiera też dwa obrazy tła, Mają one również charakter dekoracyjny, a dodawane przez CSS – są niedostępne.
Czasopismo, które ma tylko charakter dekoracyjny, ma pusty atrybut alt
oraz role
o wartości none
, ponieważ obraz jest sam
prezentacje SVG. Jeśli obrazy SVG mają znaczenie, powinny one zawierać element role="img"
.
<img src="svg/magazine.svg" alt="" role="none" />
Na dole strony znajdują się 3 opinie. W każdej z nich znajduje się obraz autora plakatu. Zwykle tekst alt
to nazwa
osoby na zdjęciu.
<img src="images/blender.svg" alt="Blendan Smooth" role="img" />
Ponieważ jest to żart, należy więc pokazać użytkownikom niedowidzącym, co może nie być dla nich jasne, aby nie przegapili
poczucie humoru; używamy pierwotnej funkcji maszyny jako elementu alt
, a nie nazwy znaku:
<img src="images/blender.svg" alt="blender" role="img" />
Zdjęcia nauczycieli to nie tylko awatary: zdjęcia biograficzne, które mają bardziej szczegółowy opis.
Gdyby to była prawdziwa witryna, można by było opisać minimalnym kadrem nauczyciela, tak aby przyszły uczeń mógł ich rozpoznać, kiedy wchodzą do klasy.
<img src="svg/hal.svg" role="img"
alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />
Ponieważ to jest strona z żartem, zamiast tego podaj informacje istotne w jego kontekście:
<img src="svg/hal.svg" role="img"
alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />
Jeśli czytasz tę stronę znajomemu przez telefon, nie będzie mu interesować, jak wygląda czerwona kropka. W tym przypadku parametr w odniesieniu do historii filmu.
Pisząc opis, zastanów się, jakie informacje zawarte na obrazie są ważne i istotne dla użytkownika.
to uwzględnić. Pamiętaj, że zawartość atrybutu alt
obrazu różni się w zależności od kontekstu. Wszystkie informacje zawarte w obrazie
aby użytkownik, który ją zobaczył, miał dostęp do treści i był związany z kontekstem, nic więcej. Zachowaj zwięzłość, precyzję
i użyteczne.
Atrybuty src
i alt
to minimalne wymagania dotyczące obrazów umieszczonych na stronach. Musimy omówić jeszcze kilka innych atrybutów.
Obrazy elastyczne
Widoczny obszar ma niezliczone rozmiary. Dostępne są też różne rozdzielczości ekranu. Nie chcesz tracić szansy na uzyskanie – obraz jest wystarczająco szeroki, by zmieścił się na dużym ekranie. Można też jednak zapewnić wyższą rozdzielczość. na małych urządzeniach, które mają czterokrotnie większą rozdzielczość ekranu. Istnieje kilka sposobów wyświetlania różnych obrazów na podstawie rozmiaru widocznego obszaru i rozdzielczości ekranu.
<img> srcset
atrybut
Atrybut srcset
umożliwia sugerowanie wielu plików graficznych,
gdy przeglądarka wybiera obraz do wyświetlenia na podstawie wielu zapytań o multimedia, w tym rozmiaru widocznego obszaru i rozdzielczości ekranu.
W jednym elemencie <img>
może występować tylko 1 atrybut srcset
, ale ten atrybut srcset
może prowadzić do wielu zdjęć. srcset
akceptuje listę wartości rozdzielonych przecinkami, z których każdy zawiera adres URL zasobu, po którym następuje spacja
deskryptory dla tej opcji obrazu. Jeśli używasz deskryptora szerokości, musisz też dodać atrybut sizes
z elementem multimedialnym
rozmiar zapytania lub rozmiar źródła dla każdej opcji srcset
innej niż ostatnia. Zapoznaj się z sekcjami z informacjami na temat elastycznych obrazów z atrybutem srcset
oraz składni opisowej.
Jeśli występuje dopasowanie, obraz srcset
będzie miał pierwszeństwo przed obrazem z kategorii src
.
<picture>
i <source>
Innym sposobem udostępniania wielu zasobów i umożliwiania przeglądarce wyrenderowania najbardziej odpowiednich zasobów jest użycie
<picture>
. Element <picture>
jest kontenerem
element dla wielu opcji obrazów wymienionych w nieograniczonej liczbie <source>
i 1 wymagany element <img>
.
Atrybuty <source>
to srcset
, sizes
, media
, width
i height
.
Atrybut srcset
jest wspólny dla atrybutów img
, source
i link
, ale ogólnie wygląda nieco inaczej w źródle
, ponieważ zapytania o media mogą być wymienione w atrybucie media elementu <srcset>
. <source>
obsługuje też formaty obrazu zdefiniowane w atrybucie type
.
Przeglądarka weźmie pod uwagę każdy element podrzędny <source>
i wybierze najlepsze dopasowanie. Jeśli nie zostaną znalezione pasujące wyniki, URL
atrybutu src
elementu <img>
jest zaznaczony. Nazwa na potrzeby ułatwień dostępu pochodzi z atrybutu alt
zagnieżdżonego elementu <img>
.
Warto też przeczytać sekcje z informacjami o elemencie <picture>
i składni standardowych treści.
Dodatkowe funkcje związane z wydajnością
Leniwe ładowanie
Atrybut loading
informuje przeglądarkę z obsługą JS, jak wczytać obraz. Wartość domyślna eager
oznacza, że obraz jest
ładowane od razu podczas analizowania kodu HTML, nawet jeśli obraz znajduje się poza widocznym widocznym obszarem. Przez ustawienie loading="lazy"
ładowanie obrazu jest odłożone do czasu, gdy prawdopodobnie znajdzie się w widocznym obszarze. „Prawdopodobnie” jest określana przez przeglądarkę na podstawie odległości
znajduje się w widocznym obszarze. Ta wartość jest aktualizowana, gdy użytkownik przewija stronę. Leniwe ładowanie pomaga oszczędzać przepustowość i CPU, co poprawia wydajność
dla większości użytkowników. Jeśli JavaScript jest wyłączony, ze względów bezpieczeństwa domyślnie dla wszystkich obrazów jest ustawiona wartość eager
.
<img src="switch.svg" alt="light switch" loading="lazy" />
Format obrazu
Przeglądarki zaczynają renderować kod HTML po jego otrzymaniu, wysyłając żądania dotyczące zasobów. Oznacza to, że przeglądarka
już renderuje kod HTML, gdy napotka tag <img>
i wysyła żądanie. A ładowanie obrazów może trochę potrwać.
Domyślnie przeglądarki nie rezerwują miejsca na obrazy o rozmiarze innym niż wymagany do renderowania tekstu w języku alt
.
Element <img>
zawsze obsługiwał atrybuty bez jednostek height
i width
. Te usługi przestały być używane
CSS. CSS może definiować wymiary obrazu, często ustawiając pojedynczy wymiar, np. max-width: 100%;
, aby zachować współczynnik proporcji.
Kod CSS jest zwykle uwzględniony w elemencie <head>
, dlatego jest analizowany przed napotkaniem wartości <img>
. Jednak bez wyraźnej listy height
lub
współczynnik proporcji zarezerwowanego miejsca to wysokość (lub szerokość) tekstu alt
. Większość deweloperów podaje tylko szerokość,
otrzymywanie i renderowanie obrazów prowadzi do skumulowanego przesunięcia układu, co niekorzystnie wpływa na wskaźniki internetowe.
Aby rozwiązać ten problem, przeglądarki obsługują formaty obrazu. Dodanie atrybutów height
i width
do elementu <img>
działa jak
wskazówkami dotyczącymi rozmiarów, które informują przeglądarkę o współczynniku proporcji i umożliwiają wybór odpowiednich
ilość miejsca, która będzie zarezerwowana na potrzeby
renderowania obrazów. Poprzez podanie wartości wysokości i szerokości obrazu przeglądarka
zna format obrazu. Gdy przeglądarka napotyka pojedynczy wymiar, np. 50%, oszczędza miejsce
dla obrazu zgodnego z wymiarami CSS, a drugi wymiar z zachowaniem współczynnika proporcji szerokości do wysokości.
<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />
Jeśli kod CSS został prawidłowo skonfigurowany tak, aby zapewnić elastyczność, obrazy nadal będą elastyczne. Tak, w zestawie bez jednostek
Wartości height
i width
zostaną zastąpione przez CSS. Celem dodania tych atrybutów jest zarezerwowanie miejsca
z odpowiednim współczynnikiem proporcji, poprawiając wydajność dzięki ograniczeniu przesunięcia układu. Zajmuje to mniej więcej tyle samo
dopiero po wczytaniu obrazu, ale interfejs nie przeskoczy go po odtworzeniu obrazu na ekranie.
Inne funkcje związane z obrazami
Element <img>
obsługuje też zmienne crossorigin
, decoding
, referrerpolicy
, a w przeglądarkach opartych na Blink –
Atrybuty fetchpriority
. Rzadko używany, jeśli obraz jest częścią mapy po stronie serwera, dodaj atrybut logiczny ismap
i umieść <img>
w linku dla użytkowników bez wskazywania urządzeń.
Atrybut ismap
nie jest wymagany (a nawet obsługiwany) w <input type="image" name="imageSubmitName">
jako x
i y
.
miejsca kliknięcia są wysyłane podczas przesyłania formularza. Jeśli występują, do nazwy wejściowej są dołączane wartości. Przykład:
gdy użytkownik kliknie obraz, wraz z formularzem zostanie przesłane np. &imageSubmitName.x=169&imageSubmitName.y=66
i ją przesłać. Jeśli zdjęcie nie ma atrybutu name
, wysyłane są wartości x i y: &x=169&y=66
.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o obrazach.
Które 2 atrybuty powinny zawsze mieć obraz na pierwszym planie?
src
alt
size