Obrazy dekoracyjne, takie jak gradient tła na przyciskach czy obrazy tła w części treści lub na całej stronie, mają charakter prezentacji i należy je stosować za pomocą CSS. Kiedy obraz dodaje kontekst do dokumentu, jest treścią i powinien umieścić go w kodzie HTML.
Główną metodą dołączania obrazów jest tag <img> z atrybutem src odwołującym się do zasobu obrazu i atrybutem alt opisującym obraz.
<img src="images/eve.png" alt="Eve">
Zarówno atrybut srcset w elemencie <img>, jak i element <picture> umożliwiają uwzględnianie wielu źródeł obrazów z powiązanymi zapytaniami o multimedia, każde z zastępczym źródłem obrazu. Pozwala to wyświetlać odpowiedni plik obrazu na podstawie rozdzielczości urządzenia, możliwości przeglądarki i rozmiaru widocznego obszaru. Atrybut srcset umożliwia przesłanie wielu wersji obrazu na podstawie rozdzielczości i – wraz z atrybutem sizes – rozmiaru 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żna to zrobić także za pomocą elementu <picture> wraz z elementami podrzędnymi <source>, gdzie domyślnym źródłem jest <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>
Korzystanie z tych wbudowanych metod elastycznych obrazów HTML umożliwia też zwiększenie wydajności renderowania obrazów dzięki różnym atrybutom. Tag <img>, a tym samym graficzne przyciski przesyłania <input type="image">, może zawierać atrybuty height i width, aby ustawić współczynnik proporcji obrazu i ograniczyć przesunięcie układu treści. Atrybut lazy włącza leniwe ładowanie.
HTML obsługuje również uwzględnianie obrazów SVG za pomocą bezpośrednio elementu <svg>, chociaż obrazy SVG z rozszerzeniem .svg (lub jako data-uri) można osadzać 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 podawania adresu URL obrazu.
Następnie przeglądarka pobiera zasób i renderuje go na stronie. Ten atrybut jest wymagany przez <img>. Bez niego nie będzie czego renderować.
Atrybut alt zawiera tekst alternatywny obrazu zawierający opis obrazu dla osób niewidomych na ekranie (takich jak wyszukiwarki i technologie wspomagające osoby z niepełnosprawnością, a nawet Alexa, Siri czy Asystent Google). Może się on wyświetlać w przeglądarce, gdy obraz się nie wczyta. Oprócz użytkowników, którzy mają wolne sieci lub ograniczoną przepustowość, tekst alt jest niezwykle przydatny w e-mailach w formacie HTML, ponieważ wielu użytkowników blokuje obrazy w swoich aplikacjach pocztowych.
<img src="path/filename" alt="descriptive text" />
Jeśli obraz jest w formacie SVG, dodaj też wartość role="img", która jest niezbędna ze względu na bugs VoiceOver.
<img src="switch.svg" alt="light switch" role="img" />
Tworzenie skutecznych alt opisów obrazów
Atrybuty alt powinny być krótkie i zwięzłe oraz zawierać wszystkie istotne informacje przekazywane przez obraz, pomijając informacje, które są zbędne lub nieprzydatne w innych częściach dokumentu. Ton tekstu powinien odzwierciedlać ton witryny.
Aby napisać skuteczny tekst alternatywny, wyobraź sobie, że czytasz całą stronę osobie, która go nie widzi. Dzięki użyciu elementu semantycznego <img> użytkownicy czytników ekranu i boty otrzymują informację, że element to obraz. Tekst „To jest zdjęcie/zrzut ekranu/zdjęcie użytkownika” w dokumencie alt jest bezsensowny. Użytkownik nie musi wiedzieć, że obraz jest dostępny, ale musi wiedzieć, jakie informacje zawiera.
Normalnie nie powiesz „To ziarnisty obraz psa w czerwonej czapce”. Wystarczy, że pokażesz, co obraz przedstawia w stosunku do pozostałej części dokumentu. To, co przekazujesz, będzie się zmieniało w zależności od kontekstu i treści otaczającego tekstu.
Na przykład zdjęcie psa jest opisywane w różny sposób w zależności od kontekstu. Jeśli Kulka jest awatarem obok opinii
o karmie dla psów, wystarczy alt="Fluffy".
Jeśli zdjęcie wyświetla się na stronie poświęconej adopcji psiaka w witrynie schroniska dla zwierząt, grupą docelową jest potencjalny rodzic z psem. Tekst powinien opisywać zawarte na obrazie informacje, które są istotne dla użytkownika i nie są powielane w otaczającym je tekście. Dłuższy opis, np. alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her
mouth", będzie odpowiedni. Tekst na stronie adopcji zawiera zazwyczaj informacje o gatunku, rasie, wieku i płci zwierzaka, którego można adoptować, więc nie trzeba powtarzać tych informacji w tekście alt. Jednak biografia psa
prawdopodobnie nie zawiera informacji o długości włosów, kolorze czy preferencjach dotyczących zabawek. Pamiętaj, że nie omówiliśmy zdjęcia – potencjalny właściciel psa nie musi wiedzieć, czy pies przebywa we wnętrzu czy na zewnątrz ani że ma czerwoną obroże i niebieską smycz.
Jeśli używasz obrazów do tworzenia ikon, atrybut alt określa nazwę na potrzeby ułatwień dostępu, dlatego przekazuj znaczenie ikony, a nie opis obrazu. Na przykład atrybut alt ikony lupy to search. Ikona przypominająca dom ma w tekście alternatywnym home. Opis ikony 5-calowej dyskietki: save. Jeśli do wskazania sprawdzonych metod i antywzorców używane są 2 ikony puszystki, uśmiechnięty pies w zielonym berecie może mieć ustawiony parametr alt="good", a warczący pies w czerwonym berecie – alt="bad". Pamiętaj, by używać tylko standardowych ikon, a jeśli używasz niestandardowych ikon,
np. dobrej i złej, dodaj legendę. Upewnij się, że nie są to jedyne sposoby na odszyfrowanie znaczenia elementów interfejsu.
Jeśli obraz jest zrzutem ekranu lub wykresem, zamiast opisywać jego wygląd napisz, czego udało Ci się z niego dowiedzieć. Obraz może być wart tysiąc słów, ale opis powinien zwięźle przekazać wszystko, czego się nauczyliśmy.
Pomiń informacje, które użytkownik zna już z kontekstu i które w inny sposób zna w treści. Jeśli na przykład jesteś na stronie samouczka na temat zmiany ustawień przeglądarki, a strona zawiera informacje o klikaniu ikon w przeglądarce Chrome, adres URL strony widocznej na zrzucie ekranu nie ma znaczenia. Ogranicz alt do bieżącego tematu: jak zmienić ustawienia. alt może wyglądać tak:
„Ikona ustawień znajduje się na pasku nawigacyjnym pod polem wyszukiwania”. Nie dodawaj „zrzutów ekranu” ani „machinelearningworkshop”, ponieważ użytkownik nie musi wiedzieć, że jest to zrzut ekranu, ani wiedzieć, gdzie surfował po wprowadzeniu instrukcji. Opis obrazu zależy od kontekstu, w jakim znajduje się ono w pierwszej kolejności.
Jeśli zrzut ekranu pokazuje, jak znaleźć numer wersji przeglądarki w witrynie chrome://version/, umieść adres URL w treści strony jako instrukcje i podaj pusty ciąg znaków jako atrybut alt, ponieważ obraz nie zawiera informacji, które nie znajdowały się w otaczającym tekście.
Jeśli obraz nie zawiera żadnych dodatkowych informacji lub jest tylko funkcją dekoracyjną, atrybut powinien być nadal widoczny jako pusty ciąg znaków.
<img src="svg/magazine.svg" alt="" role="none" />
Na stronie MachineLearningWorkshop.com dostępnych jest 7 obrazów na pierwszym planie, w tym 7 z atrybutami alt: przełącznik świateł wielkanocnych, ikona ręczna, dwa zdjęcia biograficzne Hala i Eve oraz trzy awatary miksera, odkurzacza i tostera. Tylko obraz na pierwszym planie, który wygląda jak czasopismo, ma charakter czysto ozdobny. Strona zawiera też 2 obrazy tła. Mają one charakter dekoracyjny i są niedostępne, ponieważ zostały dodane za pomocą CSS.
Magazyn jest czysto dekoracyjny, ma pusty atrybut alt i role z none, ponieważ obraz jest w pełni prezentacyjnym plikiem SVG. Jeśli to możliwe, obrazy SVG powinny zawierać role="img".
<img src="svg/magazine.svg" alt="" role="none" />
Na dole strony są 3 opinie. Każda z nich zawiera obraz plakatu. Zwykle tekst alt to imię i nazwisko osoby na zdjęciu.
<img src="images/blender.svg" alt="Blendan Smooth" role="img" />
Jest to strona tylko dla żartów. Trzeba jednak przekazać informacje, które mogą być niezrozumiałe dla użytkowników niedowidzących, aby nie przegapili humorystycznego charakteru. Jako alt używamy pierwotnej funkcji maszyny, zamiast imienia postaci:
<img src="images/blender.svg" alt="blender" role="img" />
Zdjęcia instruktorów to nie tylko awatary – to obrazy biograficzne, więc zawierają bardziej szczegółowy opis.
Gdyby to była prawdziwa strona, podaj minimalny opis tego, jak wygląda nauczyciel, aby przyszły uczeń mógł go rozpoznać, kiedy wejdzie 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ż jest to witryna z żartami, zamiast tego podaj odpowiednie informacje w kontekście żartu:
<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." />
Gdyby czytasz tę stronę znajomemu przez telefon, nie obchodzi go, jak wygląda czerwona kropka. W tym przypadku liczy się historia odniesienia do filmu.
Pisząc opis, zastanów się, jakie informacje zawiera obraz, które są ważne i istotne dla użytkownika, i uwzględnij je. Pamiętaj, że zawartość atrybutu alt obrazu różni się w zależności od kontekstu. Wszystkie informacje przedstawione w formie obrazu, do których użytkownik może uzyskać dostęp, i są odpowiednie do kontekstu – nic więcej. Zachowaj zwięzłość,
precyzję i użyteczność.
Atrybuty src i alt to minimalne wymagania w przypadku umieszczonych obrazów. Jest jeszcze kilka innych atrybutów, które musimy omówić.
Obrazy elastyczne
Do wyboru masz niezliczone rozmiary widocznego obszaru. Dostępne są też różne rozdzielczości ekranu. W ten sposób nie stracisz przepustowości na urządzenia mobilne, wyświetlając mu obraz na tyle szeroki, by zmieścił się na dużym monitorze. Za to na mniejszych urządzeniach o czterokrotnie większej rozdzielczości niż normalnie możesz wyświetlać obrazy w wyższej rozdzielczości. Jest kilka sposobów wyświetlania różnych obrazów w zależności od rozmiaru widocznego obszaru i rozdzielczości ekranu.
<img> srcset atrybut
Atrybut srcset umożliwia sugerowanie wielu plików graficznych, a przeglądarka wybiera obraz, który ma zostać wysłany, na podstawie różnych zapytań o multimedia, w tym rozmiaru widocznego obszaru i rozdzielczości ekranu.
Każdy element <img> może mieć 1 atrybut srcset, ale ten atrybut srcset może prowadzić do wielu obrazów. Atrybut srcset może zawierać listę wartości rozdzielonych przecinkami. Każda z nich zawiera adres URL zasobu, po którym następuje spacja, a po niej deskryptory danej opcji obrazu. Jeśli używasz deskryptora szerokości, musisz też dołączyć atrybut sizes w zapytaniu o multimedia lub rozmiarze źródła dla każdej opcji srcset innej niż ostatnia. Warto przeczytać sekcje dotyczące obrazów elastycznych z atrybutem srcset i opisem składni.
Jeśli uda się dopasować obraz srcset, będzie miał pierwszeństwo przed obrazem src.
<picture> i <source>
Inną metodą udostępniania wielu zasobów i umożliwiania przeglądarce wyrenderowania najbardziej odpowiedniego z nich jest użycie elementu <picture>. Element <picture> to kontener na wiele opcji obrazu wymienionych w nieograniczonej liczbie elementów <source> i jednym wymaganym elemencie <img>.
Atrybuty <source> to srcset, sizes, media, width i height.
Atrybut srcset jest wspólny dla elementów img, source i link, ale ogólnie jest zaimplementowany nieco inaczej w źródle, ponieważ zapytania o multimedia mogą zostać wymienione w atrybucie media <srcset>. <source> obsługuje też formaty obrazu zdefiniowane w atrybucie type.
Przeglądarka weźmie pod uwagę każdy podrzędny element <source> i wybierze najlepsze z nich. Jeśli nie zostaną znalezione żadne dopasowania, wybrany jest adres URL atrybutu src elementu <img>. Nazwa na potrzeby ułatwień dostępu pochodzi z atrybutu alt zagnieżdżonego tagu <img>.
Warto też przeczytać sekcje poświęcone elementowi <picture> i przepisom składni.
Dodatkowe funkcje związane z wydajnością
Leniwe ładowanie
Atrybut loading informuje przeglądarkę z włączoną obsługą JavaScriptu, jak wczytać obraz. Domyślna wartość eager oznacza, że obraz jest wczytywany natychmiast w trakcie analizy kodu HTML, nawet jeśli znajduje się on poza widocznym obszarem. Jeśli ustawisz wartość loading="lazy", wczytywanie obrazu zostanie odłożone do momentu, gdy prawdopodobnie znajdzie się on w widocznym obszarze. Wartość „Prawdopodobnie” jest określana przez przeglądarkę na podstawie odległości między obrazem a widocznym obszarem. Ta wartość jest aktualizowana podczas przewijania. Leniwe ładowanie pomaga oszczędzać przepustowość i CPU, zwiększając wydajność u większości użytkowników. Jeśli JavaScript jest wyłączony ze względów bezpieczeństwa, wszystkie obrazy będą domyślnie korzystać z tego języka: eager.
<img src="switch.svg" alt="light switch" loading="lazy" />
Format obrazu
Przeglądarki zaczynają wyświetlać kod HTML po jego otrzymaniu, wysyłając w razie potrzeby żądania zasobów. Oznacza to, że przeglądarka renderuje już kod HTML, gdy napotka tag <img> i wysyła żądanie. a wczytywanie obrazów może trochę potrwać.
Domyślnie przeglądarki nie rezerwują miejsca na obrazy inne niż wymagany do renderowania tekstu alt.
Element <img> zawsze obsługiwał atrybuty height i width bez jednostek. Wycofały się z użycia
na rzecz CSS. CSS może definiować wymiary obrazu, często ustawiając jeden wymiar, taki jak max-width: 100%;, aby zachować współczynnik proporcji.
Kod CSS jest zwykle zawarty w elemencie <head>, więc jest analizowany przed napotkaniem parametru <img>. Jeśli jednak nie podasz właściwości height lub współczynnika proporcji, zarezerwowane miejsce będzie stanowić wysokość (lub szerokość) tekstu alt. Większość programistów określa tylko szerokość, więc otrzymanie 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. Uwzględnienie atrybutów height i width w komponencie <img> działa jak wskazówki dotyczące rozmiaru, informując przeglądarkę o współczynniku proporcji, co pozwala na zarezerwowanie odpowiedniej ilości miejsca na potrzeby ewentualnego renderowania obrazu. Umieszczając w obrazie wartości wysokości i szerokości, przeglądarka zna jego współczynnik proporcji. Gdy przeglądarka natrafi na jeden wymiar, jak w naszym przykładzie 50%, oszczędza miejsce na reklamę przylegającą do wymiaru CSS, a drugi wymiar zachowuje współczynnik 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, obrazy nadal będą działać. Tak. Podane wartości height i width bez jednostek zostaną zastąpione przez CSS. Dodanie tych atrybutów ma na celu zarezerwowanie przestrzeni we właściwym współczynniku proporcji, co pozwoli poprawić wydajność przez ograniczenie przesunięcia układu. Wczytanie strony będzie trwało mniej więcej tyle samo, ale interfejs nie podskoczy po wyrenderowaniu obrazu na ekran.
Inne funkcje związane z obrazem
Element <img> obsługuje też atrybuty crossorigin, decoding i referrerpolicy, a w przeglądarkach opartych na Blinku – fetchpriority. Rzadko używana, jeśli obraz jest częścią mapy po stronie serwera, dodaj atrybut wartości logicznej ismap i umieść <img> w linku dla użytkowników bez urządzeń wskazujących.
Atrybut ismap nie jest wymagany, a nawet obsługiwany w <input type="image" name="imageSubmitName">, ponieważ współrzędne x i y lokalizacji kliknięcia są wysyłane podczas przesyłania formularza, dołączając odpowiednie wartości do nazwy wejściowej (jeśli występują). Gdy użytkownik kliknie obraz i prześle go, formularz podobny do &imageSubmitName.x=169&imageSubmitName.y=66 zostanie przesłany razem z formularzem. Jeśli obraz nie ma atrybutu name, wysyłane są wartości x i y: &x=169&y=66.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o obrazach.
Jakie 2 atrybuty powinien zawsze mieć obraz na pierwszym planie?
sizealtsrc