Grafika

Obrazy dekoracyjne, takie jak gradienty tła na przyciskach lub obrazy tła w sekcjach treści lub na całej stronie, są elementami prezentacyjnymi i powinny być stosowane za pomocą CSS. Jeśli obraz dodaje kontekst do dokumentu, jest treścią i powinien być umieszczony w kodzie HTML.

Główną metodą dodawania 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ędnienie wielu źródeł obrazów z powiązanymi zapytaniami o media, z których każde ma źródło obrazu rezerwowego. Dzięki temu można wyświetlać najbardziej odpowiedni plik graficzny na podstawie rozdzielczości urządzenia, możliwości przeglądarki i rozmiaru obszaru wyświetlania. Atrybut srcset umożliwia podawanie wielu wersji obrazu w zależności od rozdzielczości, a wraz z atrybutem sizes – od rozmiaru obszaru wyświetlania 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 też zrobić za pomocą elementu <picture> wraz z elementami podrzędnymi <source>, który jako domyślne źródło przyjmuje element <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 dotyczących elastycznych obrazów HTML umożliwia też poprawę wydajności renderowania obrazów za pomocą różnych atrybutów. Tag <img>, a co za tym idzie graficzne przyciski przesyłania<input type="image">, może zawierać atrybuty height i width, aby ustawić współczynnik proporcji obrazu i zmniejszyć przesunięcie układu treści. Atrybut lazy umożliwia leniwe ładowanie.

HTML obsługuje też bezpośrednie wstawianie obrazów SVG za pomocą tagu <svg>, ale obrazy SVG z rozszerzeniem .svg (lub jako data-uri) można wstawiać za pomocą elementu <img>.

Każdy obraz pierwszego planu powinien zawierać co najmniej atrybuty src i alt.

src to ścieżka i nazwa pliku obrazu osadzonego. 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 ma nic do renderowania.

Atrybut alt zawiera tekst alternatywny do obrazu, który opisuje obraz osobom, które nie widzą ekranu (np. wyszukiwarkom, technologiom wspomagającym, a nawet Alexie, Siri i Asystentowi Google). Może być wyświetlany przez przeglądarkę, jeśli obraz nie zostanie wczytany. Oprócz użytkowników z wolnymi sieciami lub ograniczoną przepustowością alt tekst jest niezwykle przydatny w przypadku e-maili w formacie HTML, ponieważ wielu użytkowników blokuje obrazy w aplikacjach poczty e-mail.

<img src="path/filename" alt="descriptive text" />

Jeśli obraz jest plikiem SVG, dodaj też role="img", co jest konieczne ze względu na VoiceOver w 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, zawierać wszystkie istotne informacje, które przekazuje obraz, a pomijać informacje zbędne w stosunku do innych treści w dokumencie lub w inny sposób nieprzydatne. Podczas pisania tekstu należy zachować ton zgodny z tonem witryny.

Aby napisać skuteczny tekst alternatywny, wyobraź sobie, że czytasz całą stronę osobie, która jej nie widzi. Używając elementu semantycznego <img>, informujesz użytkowników czytników ekranu i boty, że element jest obrazem. Dodawanie do alt informacji „To jest obraz/zrzut ekranu/zdjęcie” jest zbędne. Użytkownik nie musi wiedzieć, że jest tam obraz, ale musi wiedzieć, jakie informacje przekazuje ten obraz.

Zwykle nie mówisz: „To ziarnisty obraz psa w czerwonym kapeluszu”. Zamiast tego przekaż, co obraz przedstawia w kontekście reszty dokumentu. Przekaz zmienia się w zależności od kontekstu i treści otaczającego tekstu.

Na przykład zdjęcie psa jest opisywane na różne sposoby w zależności od kontekstu. Jeśli Fluffy to awatar obok opinii o karmie dla psów Yuckymeat, wystarczy alt="Fluffy".

Jeśli zdjęcie jest częścią strony adopcyjnej Fluffy w witrynie schroniska dla zwierząt, odbiorcami są potencjalni opiekunowie psa. Tekst powinien opisywać informacje przekazywane na obrazie, które są istotne dla osoby korzystającej z technologii wspomagających i nie są powielane w otaczającym tekście. Odpowiedni będzie dłuższy opis, np.alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth". Tekst na stronie adopcyjnej zwykle zawiera gatunek, rasę, wiek i płeć zwierzęcia, więc nie trzeba tego powtarzać w tekście alternatywnym. Ale w biografii psa prawdopodobnie nie znajdziesz informacji o długości sierści, kolorach czy preferencjach dotyczących zabawek.

Co ważne, nie opisaliśmy obrazu w całości. Potencjalny właściciel psa nie musi wiedzieć, czy pies jest w domu czy na zewnątrz, ani że ma czerwoną obrożę i niebieską smycz.

Jeśli używasz obrazów jako ikon, atrybut alt zawiera nazwę dostępną dla osób z niepełnosprawnościami, więc przekazuj znaczenie ikony, a nie opis obrazu. Na przykład atrybut alt ikony lupy to search. Ikona przypominająca dom ma tekst alternatywny home. Opis ikony dyskietki 5-calowej to save. Jeśli do oznaczania sprawdzonych metod i nieprawidłowości używane są 2 ikony Fluffy, uśmiechnięty pies w zielonym berecie może mieć ustawioną wartość alt="good", a wściekły pies w czerwonym berecie może mieć ustawioną wartość alt="bad". Używaj tylko standardowych ikon. Jeśli używasz niestandardowych ikon, takich jak dobre i złe Fluffy, dołącz legendę. Upewnij się, że ikony nie są jedynym sposobem na odczytanie znaczenia elementów interfejsu.

Jeśli obraz jest zrzutem ekranu lub wykresem, napisz, czego można się z niego dowiedzieć, zamiast opisywać jego wygląd. Obraz może być wart tysiąca słów, ale opis powinien zwięźle przekazywać wszystko, czego można się z niego dowiedzieć.

Pomiń informacje, które użytkownik już zna z kontekstu i o których jest informowany w treści. Jeśli na przykład jesteś na stronie z samouczkiem dotyczącym zmiany ustawień przeglądarki, a strona ta zawiera informacje o klikaniu ikon w przeglądarce Chrome, adres URL strony na zrzucie ekranu nie jest ważny. Ogranicz się do tematu: jak zmienić ustawienia.alt

alt może brzmieć: „Ikona ustawień znajduje się na pasku nawigacyjnym pod polem wyszukiwania”. Nie używaj słów „zrzut ekranu” ani „machinelearningworkshop”, ponieważ użytkownik nie musi wiedzieć, że to zrzut ekranu, ani gdzie autor techniczny przeglądał strony, gdy pisał instrukcje. Opis obrazu jest oparty na kontekście, w jakim został on pierwotnie umieszczony.

Jeśli zrzut ekranu pokazuje, jak znaleźć numer wersji przeglądarki, przechodząc do strony chrome://version/, umieść adres URL w treści strony jako instrukcję i podaj pusty ciąg znaków jako atrybut alt, ponieważ obraz nie zawiera informacji, których nie ma w otaczającym go tekście.

Jeśli obraz nie zawiera dodatkowych informacji lub ma charakter wyłącznie dekoracyjny, atrybut powinien nadal występować, ale jako pusty ciąg znaków.

<img src="svg/magazine.svg" alt="" role="none" />

Witryna MachineLearningWorkshop.com zawiera 7 obrazów na pierwszym planie, a więc 7 obrazów z atrybutami alt: włącznik światła w kształcie pisanki, ikona instrukcji, 2 zdjęcia biograficzne Hala i Eve oraz 3 awatary blendera, odkurzacza i tostera. Obraz na pierwszym planie, który wygląda jak magazyn, jest jedynym elementem, który ma charakter wyłącznie dekoracyjny. Na stronie znajdują się też 2 obrazy tła. Te obrazy mają charakter dekoracyjny i zostały dodane za pomocą CSS, dlatego są niedostępne.

Magazyn ma charakter wyłącznie dekoracyjny, więc ma pusty atrybut alt, a role ma wartość none, ponieważ obraz jest plikiem SVG o charakterze wyłącznie prezentacyjnym. Jeśli ma to znaczenie, obrazy SVG powinny zawierać element role="img".

<img src="svg/magazine.svg" alt="" role="none" />

U dołu strony znajdują się 3 opinie, a 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" />

Ponieważ jest to strona z żartami, powinieneś przekazać to, co może być niewidoczne dla użytkowników z wadami wzroku, aby nie przegapili humoru. Zamiast imienia postaci używamy oryginalnej funkcji urządzenia jako alt:

<img src="images/blender.svg" alt="blender" role="img" />

Zdjęcia instruktorów to nie tylko awatary, ale zdjęcia biograficzne, dlatego mają bardziej szczegółowy opis.

Gdyby to była prawdziwa witryna, podałbyś minimalny opis wyglądu nauczyciela, aby potencjalny uczeń mógł go rozpoznać po wejściu 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 strona z żartami, podaj informacje, które są istotne 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." />

Jeśli czytasz stronę znajomemu przez telefon, nie będzie go interesować, jak wygląda czerwona kropka. W tym przypadku historia odniesienia do filmu ma znaczenie.

Podczas pisania tekstu opisowego zastanów się, jakie ważne i istotne dla użytkownika informacje przekazuje obraz, i uwzględnij je w opisie. Pamiętaj, że zawartość atrybutu alt w przypadku obrazu różni się w zależności od kontekstu. Należy przekazać wszystkie informacje zawarte na obrazie, do których ma dostęp użytkownik widzący i które są istotne w danym kontekście. Nie należy przekazywać niczego więcej. Niech będzie krótka, precyzyjna i przydatna.

Atrybuty src i alt są wymagane w przypadku obrazów osadzonych. Musimy omówić jeszcze kilka innych atrybutów.

Obrazy elastyczne

Istnieje wiele rozmiarów widocznego obszaru i rozdzielczości ekranu. Nie chcesz marnować przepustowości użytkownika mobilnego, wyświetlając mu obraz wystarczająco szeroki dla monitora o dużym ekranie, ale możesz wyświetlać obrazy o wyższej rozdzielczości na małych urządzeniach, które mają 4-krotnie większą rozdzielczość ekranu niż zwykle. Istnieje 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 obrazów, a przeglądarka wybiera, który obraz ma zostać pobrany, na podstawie wielu zapytań o multimedia, w tym rozmiaru widocznego obszaru i rozdzielczości ekranu.

W przypadku każdego elementu <img> może występować tylko 1 atrybut srcset, ale może on prowadzić do wielu obrazów.srcset Atrybut srcset akceptuje listę wartości oddzielonych przecinkami. Każda wartość zawiera adres URL komponentu, po którym następuje spacja i deskryptory tej opcji obrazu. Jeśli używasz deskryptora szerokości, musisz też dodać atrybut sizes z zapytaniem o media lub rozmiarem źródła dla każdej opcji srcset z wyjątkiem ostatniej. Warto przeczytać sekcje „Dowiedz się więcej” dotyczące elastycznych obrazów z użyciem srcset i składni opisowej.

Jeśli wystąpi dopasowanie, obraz srcset ma pierwszeństwo przed obrazem src.

<picture> i <source>

Inną metodą udostępniania wielu zasobów i umożliwiania przeglądarce renderowania najbardziej odpowiedniego zasobu jest użycie elementu <picture>. Element <picture> to element kontenera dla wielu opcji obrazów wymienionych w nieograniczonej liczbie elementów <source> i jednego wymaganego elementu <img>.

Atrybuty <source> to m.in. srcset, sizes, media, width i height. Atrybut srcset jest wspólny dla tagów img, source i link, ale w źródle jest zwykle implementowany nieco inaczej, ponieważ zapytania o media mogą być wymienione w atrybucie media tagu <srcset>. <source> obsługuje też formaty obrazów zdefiniowane w atrybucie type.

Przeglądarka rozpatruje każdy element podrzędny <source> i wybiera najlepsze dopasowanie. Jeśli nie zostaną znalezione żadne pasujące wyniki, zostanie wybrany URL atrybutu src elementu <img>. Nazwa dostępna pochodzi z atrybutu alt zagnieżdżonego elementu <img>. Warto też zapoznać się z sekcjami dotyczącymi elementu <picture> i składni nakazowej.

Dodatkowe funkcje wydajności

Istnieje wiele dodatkowych funkcji obrazów, które mogą poprawić wydajność witryny.

Leniwe ładowanie

loadingAtrybut informuje przeglądarkę obsługującą JavaScript, jak wczytać obraz. Domyślna wartość eager oznacza, że obraz jest wczytywany natychmiast po przeanalizowaniu kodu HTML, nawet jeśli znajduje się poza widocznym obszarem. Ustawiając loading="lazy", opóźniasz ładowanie obrazu do momentu, gdy prawdopodobnie pojawi się on w widocznym obszarze. Określenie „prawdopodobnie” jest ustalane przez przeglądarkę na podstawie odległości obrazu od obszaru widocznego. Jest ona aktualizowana w miarę przewijania przez użytkownika. Leniwe ładowanie pomaga oszczędzać przepustowość i obciążenie procesora, co zwiększa wydajność u większości użytkowników. Jeśli JavaScript jest wyłączony, ze względów bezpieczeństwa wszystkie obrazy są domyślnie ustawione na 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, gdy je napotkają. Oznacza to, że przeglądarka renderuje już kod HTML, gdy napotyka tag <img> i wysyła żądanie. A wczytywanie obrazów może chwilę potrwać. Domyślnie przeglądarki nie rezerwują miejsca na obrazy inne niż rozmiar wymagany do renderowania tekstu alt.

Element <img> zawsze obsługiwał atrybuty height i width bez jednostek. Te właściwości wyszły z użycia na rzecz CSS. Usługa porównywania cen może określać wymiary obrazu, często ustawiając jeden wymiar, np. max-width: 100%;, aby zachować współczynnik proporcji.

Ponieważ CSS jest zwykle zawarty w sekcji <head>, jest on analizowany przed napotkaniem jakiegokolwiek elementu <img>. Jeśli jednak nie podasz wyraźnie height ani współczynnika proporcji, zarezerwowana przestrzeń będzie miała wysokość (lub szerokość) tekstu alt.

Gdy deweloperzy deklarują tylko szerokość, odbiór i renderowanie obrazów prowadzi do skumulowanego przesunięcia układu, co negatywnie wpływa na podstawowe sygnały internetowe. Aby rozwiązać ten problem, przeglądarki obsługują proporcje obrazu. Umieszczenie atrybutów height i width w elemencie <img> działa jak wskazówki dotyczące rozmiaru, informując przeglądarkę o formacie obrazu, co umożliwia zarezerwowanie odpowiedniej ilości miejsca na ostateczne renderowanie obrazu. Gdy przeglądarka napotka pojedynczy wymiar, np. w naszym przykładzie 50%, zarezerwuje miejsce na obraz zgodnie z wymiarem CSS, a drugi wymiar zachowa współczynnik proporcji szerokości do wysokości.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

Obrazy są elastyczne, jeśli CSS został prawidłowo skonfigurowany, aby je dostosowywać. Tak, dołączone wartości bez jednostek height i width są zastępowane przez CSS. Celem uwzględnienia tych atrybutów jest zarezerwowanie miejsca o odpowiednich proporcjach, co poprawia wydajność przez zmniejszenie przesunięcia układu. Strona będzie się wczytywać mniej więcej tyle samo czasu, ale interfejs nie będzie przeskakiwać, gdy obraz zostanie wyświetlony na ekranie.

Inne funkcje obrazu

Element <img> obsługuje też atrybuty crossorigin, decoding, referrerpolicy i fetchpriority (w przeglądarkach opartych na Blink). Rzadko używany. Jeśli obraz jest częścią mapy po stronie serwera, uwzględnij atrybut logiczny ismap i zagnieźdź <img> w linku dla użytkowników bez urządzeń wskazujących.

Atrybut ismap nie jest konieczny ani nawet obsługiwany w przypadku elementu <input type="image" name="imageSubmitName">, ponieważ współrzędne x i y lokalizacji kliknięcia są przesyłane podczas przesyłania formularza, a wartości są dołączane do nazwy pola wejściowego, jeśli taka istnieje. Na przykład po kliknięciu i przesłaniu obrazu przez użytkownika wraz z formularzem przesyłana jest wartość podobna do tej:&imageSubmitName.x=169&imageSubmitName.y=66. 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.