Grafika

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.