Изображения

Декоративные изображения, такие как градиенты фона на кнопках или фоновые изображения в разделах контента или на всей странице, являются презентационными и должны применяться с помощью CSS. Когда изображение добавляет контекст к документу, оно является содержимым и должно быть встроено в HTML.

Основным методом включения изображений является тег <img> с атрибутом src , ссылающимся на ресурс изображения, и атрибутом alt , описывающим изображение.

<img src="images/eve.png" alt="Eve">

И атрибут srcset в <img> , и элемент <picture> предоставляют возможность включать несколько источников изображений с соответствующими медиа-запросами, каждый из которых имеет резервный источник изображения, что позволяет обслуживать наиболее подходящий файл изображения в зависимости от разрешения устройства, возможностей браузера, и размер области просмотра. Атрибут srcset позволяет предоставлять несколько версий изображения в зависимости от разрешения и, наряду с атрибутом sizes , размера области просмотра браузера.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

Это также можно сделать с помощью элемента <picture> вместе с дочерними элементами <source> , которые принимают <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>

В дополнение к этим встроенным методам адаптивного изображения HTML HTML также позволяет улучшить производительность рендеринга изображений с помощью различных атрибутов. Тег <img> и, следовательно, графические кнопки отправки <input type="image"> могут включать атрибуты height и width , чтобы установить соотношение сторон изображения и уменьшить сдвиг макета контента. Атрибут lazy включает отложенную загрузку .

HTML также поддерживает включение изображений SVG напрямую с помощью <svg> , хотя изображения SVG с расширением .svg (или в виде data-uri ) можно встраивать с помощью элемента <img> .

Как минимум, каждое изображение переднего плана должно включать атрибуты src и alt .

Файл src — это путь и имя файла встроенного изображения. Атрибут src используется для предоставления URL-адреса изображения. Затем браузер извлекает ресурс и отображает его на странице. Этот атрибут требуется <img> ; без него нечего рендерить.

Атрибут alt предоставляет альтернативный текст для изображения, предоставляя описание изображения для тех, кто не может видеть экран (например, поисковые системы и вспомогательные технологии, и даже Alexa, Siri и Google Assistant), и может отображаться браузером, если изображение не загружается. Помимо пользователей с медленной сетью или ограниченной пропускной способностью, alt текст невероятно полезен в электронных письмах в формате HTML, поскольку многие пользователи блокируют изображения в своих почтовых приложениях.

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

Если изображение имеет тип файла SVG, также включите role="img" , что необходимо из-за ошибок VoiceOver .

<img src="switch.svg" alt="light switch" role="img" />

Написание эффективных описаний alt изображений

Атрибуты Alt стремятся быть краткими и лаконичными, предоставляя всю необходимую информацию, которую передает изображение, опуская при этом информацию, которая является избыточной для другого содержимого документа или по другим причинам бесполезна. При написании текста тон должен отражать тон сайта.

Чтобы написать эффективный альтернативный текст, представьте, что вы читаете всю страницу человеку, который ее не видит. Используя семантический элемент <img> , пользователи и боты программ чтения с экрана информируются о том, что этот элемент является изображением. Нет необходимости включать «Это изображение/скриншот/фото» в alt . Пользователю не обязательно знать, что существует изображение, но ему необходимо знать, какую информацию оно передает.

Обычно вы бы не сказали: «Это зернистое изображение собаки в красной шляпе». Скорее, вы бы передали то, что передает изображение, по отношению к контексту остальной части документа; и то, что вы передаете, будет меняться в зависимости от контекста и содержания окружающего текста.

Например, фото собаки будет описано по-разному, в зависимости от контекста. Если Пушистый является аватаром рядом с обзором корма для собак Yuckymeat, достаточно alt="Fluffy" .

Если фотография является частью страницы усыновления Пушистика на сайте приюта для животных, целевой аудиторией является будущий родитель собаки. Текст должен описывать информацию, передаваемую на изображении, которая имеет отношение к усыновителю и не дублируется в окружающем тексте. Подойдет более длинное описание, например alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth" . Текст страницы усыновления обычно включает вид, породу, возраст и пол усыновляемого домашнего животного, поэтому его не нужно повторять в альтернативном тексте. Но письменная биография собаки, вероятно, не включает длину шерсти, цвета или предпочтения в отношении игрушек. Обратите внимание, что мы не описывали изображение: потенциальному владельцу собаки не нужно знать, находится ли собака в помещении или на улице, или что у нее красный ошейник и синий поводок.

При использовании изображений для иконографии, поскольку атрибут alt предоставляет доступное имя, передавайте значение значка, а не описание изображения. Например, атрибут alt значка лупы — search . Значок, похожий на дом, имеет в качестве альтернативного текста home . Описание значка 5-дюймовой дискеты save . Если есть два значка Пушистика, используемые для обозначения лучших практик и антишаблонов, у улыбающейся собаки в зеленом берете может быть установлен alt="good" , а у рычащей собаки в красном берете может быть установлено alt="bad" . Тем не менее, используйте только стандартные значки, а если вы используете нестандартные значки, такие как хороший и плохой Пушистый, включите легенду и убедитесь, что значки не являются единственным способом расшифровки значения ваших элементов пользовательского интерфейса.

Если изображение представляет собой снимок экрана или график, напишите, что вы узнали из изображения, а не описывайте его внешний вид. Хотя изображение определенно может стоить тысячи слов, описание должно кратко передавать все, что вы узнали.

Опустите информацию, которую пользователь уже знает из контекста и о которой иным образом сообщается в контенте. Например, если вы находитесь на странице руководства по изменению настроек браузера, а страница посвящена щелчку значков в Chrome браузера, URL-адрес страницы на снимке экрана не важен. Ограничьте alt рассматриваемой теме: как изменить настройки. alt может быть «Значок настроек находится на панели навигации под полем поиска». Не включайте «скриншот» или «мастерская машинного обучения», поскольку пользователю не нужно знать, что это снимок экрана, и ему не нужно знать, где технический писатель просматривал страницы, когда писал инструкции. Описание изображения основано на контексте того, почему изображение было включено в первую очередь.

Если на снимке экрана показано, как найти номер версии браузера, перейдя по адресу chrome://version/ , включите URL-адрес в содержимое страницы в качестве инструкций и укажите пустую строку в качестве атрибута alt, поскольку изображение не предоставляет никакой информации, которая его нет в окружающем тексте.

Если изображение не содержит дополнительной информации или носит чисто декоративный характер, атрибут все равно должен присутствовать в виде пустой строки.

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

MachineLearningWorkshop.com имеет семь изображений переднего плана, следовательно, семь изображений с альтернативными атрибутами: выключатель света в пасхальном яйце, значок руководства, две биографические фотографии Хэла и Евы и три аватара блендера, пылесоса и тостера. Изображение на переднем плане, похожее на журнал, — единственное, которое носит чисто декоративный характер. На странице также есть два фоновых изображения; они также являются декоративными и, поскольку добавляются с помощью CSS, недоступны.

Журнал, будучи чисто декоративным, имеет пустой атрибут alt и none имеет role , поскольку изображение представляет собой чисто презентационный SVG. Если это имеет смысл, изображения SVG должны включать role="img" .

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

Внизу страницы есть три отзыва, каждый с изображением постера. Обычно alt текст представляет собой имя человека, изображенного на фотографии.

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

Вместо этого, поскольку это страница шуток, вам следует передать то, что может быть неочевидно для пользователей с плохим зрением, чтобы они не пропустили юмор; мы используем исходную машинную функцию в качестве alt вместо имени персонажа:

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

Фотографии инструкторов — это не просто аватары: это биографические образы и поэтому получают более подробное описание.

Если бы это был реальный сайт, вы бы предоставили минимальное описание того, как выглядит учитель, чтобы потенциальный ученик мог узнать его при входе в класс.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

Поскольку это сайт шуток, вместо этого предоставьте информацию, которая имеет отношение к контексту шутки:

<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." />

Если бы вы читали страницу другу по телефону, ему было бы все равно, как выглядит красная точка. В этом случае имеет значение история отсылки к фильму.

При написании описательного текста учитывайте, какую информацию передает изображение, которая важна и актуальна для пользователя, и включите ее. Помните, что содержимое атрибута alt изображения различается в зависимости от контекста. Вся информация, переданная в изображении, к которому может получить доступ зрячий пользователь и которая имеет отношение к контексту, — это то, что необходимо передать; больше ничего. Будьте краткими, точными и полезными.

Атрибуты src и alt являются минимальными требованиями для встроенных изображений. Есть еще несколько атрибутов, которые нам нужно обсудить.

Адаптивные изображения

Существует множество размеров области просмотра. Также существуют разные разрешения экрана. Вы не хотите тратить пропускную способность мобильного пользователя, предоставляя ему изображение, достаточно широкое для монитора с большим экраном, но вы можете захотеть предоставлять изображения с более высоким разрешением для крошечных устройств, разрешение экрана которых в четыре раза превышает нормальное. Существует несколько способов предоставления разных изображений в зависимости от размера области просмотра и разрешения экрана.

Атрибут <img> srcset

Атрибут srcset позволяет предлагать несколько файлов изображений, при этом браузер выбирает, какое изображение запрашивать, на основе нескольких медиа-запросов, включая размер области просмотра и разрешение экрана.

Для каждого элемента <img> может быть один атрибут srcset , но этот srcset может ссылаться на несколько изображений. Атрибут srcset принимает список значений, разделенных запятыми, каждое из которых содержит URL-адрес ресурса, за которым следует пробел, за которым следуют дескрипторы для этого параметра изображения. Если используется дескриптор ширины, вы также должны включить атрибут sizes в медиазапрос или исходный размер для каждого параметра srcset , кроме последнего. Стоит прочитать разделы «Изучение», посвященные адаптивным изображениям с srcset и описательным синтаксисом .

Изображение srcset будет иметь приоритет над изображением src , если есть совпадение.

<picture> и <source>

Другой метод предоставления нескольких ресурсов и предоставления браузеру возможности отображать наиболее подходящий ресурс — это использование элемента <picture> . Элемент <picture> — это элемент-контейнер для нескольких параметров изображения, перечисленных в неограниченном количестве элементов <source> и единственном обязательном элементе <img> .

Атрибуты <source> включают srcset , sizes , media , width и height . Атрибут srcset является общим для img , source и link , но обычно реализуется несколько иначе в источнике, поскольку вместо этого медиа-запросы могут быть перечислены в медиа-атрибуте <srcset> . <source> также поддерживает форматы изображений, определенные в атрибуте type .

Браузер рассмотрит каждый дочерний элемент <source> и выберет среди них наилучшее соответствие. Если совпадений не обнаружено, выбирается URL-адрес атрибута src элемента <img> . Доступное имя получается из атрибута alt вложенного <img> . Также стоит прочитать разделы «Изучение», посвященные элементу <picture> и предписывающему синтаксису .

Дополнительные характеристики производительности

Ленивая загрузка

Атрибут loading сообщает браузеру с поддержкой JS, как загружать изображение. Значение по eager означает, что изображение загружается сразу после анализа HTML, даже если изображение находится за пределами видимой области просмотра. При установке loading="lazy" загрузка изображения откладывается до тех пор, пока оно не появится в области просмотра. «Вероятно» определяется браузером на основе расстояния, на котором изображение находится от области просмотра. Это обновляется по мере прокрутки пользователем. Отложенная загрузка помогает сэкономить пропускную способность и ресурсы ЦП, повышая производительность для большинства пользователей. Если JavaScript отключен, по соображениям безопасности все изображения по умолчанию будут иметь eager .

<img src="switch.svg" alt="light switch" loading="lazy" />

Соотношение сторон

Браузеры начинают рендеринг HTML при его получении, отправляя запросы на ресурсы при обнаружении. Это означает, что браузер уже отображает HTML, когда он встречает тег <img> и выполняет запрос. И изображения могут загружаться некоторое время. По умолчанию браузеры не резервируют место для изображений, кроме размера, необходимого для отображения alt текста.

Элемент <img> всегда поддерживал безразмерные атрибуты height и width . Эти свойства вышли из употребления в пользу CSS. CSS может определять размеры изображения, часто устанавливая одно измерение, например max-width: 100%; чтобы обеспечить сохранение соотношения сторон. Поскольку CSS обычно включается в <head> , он анализируется до того, как встретится какой-либо <img> . Но без явного указания height или соотношения сторон зарезервированное пространство представляет собой высоту (или ширину) alt текста. Поскольку большинство разработчиков объявляют только ширину, получение и рендеринг изображений приводит к кумулятивному сдвигу макета , что вредит жизненно важным функциям сети . Чтобы решить эту проблему, браузеры поддерживают соотношение сторон изображения. Включение атрибутов height и width в <img> действует как подсказка по размеру , информируя браузер о соотношении сторон, позволяя зарезервировать нужное количество места для возможного рендеринга изображения. Включив в изображение значение высоты и ширины, браузер узнает соотношение сторон этого изображения. Когда браузер встречает одно измерение, например, в нашем примере с 50%, он экономит место для изображения, которое соответствует размеру CSS, а другое измерение сохраняет соотношение сторон ширины и высоты.

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

Ваши изображения по-прежнему будут адаптивными, если CSS был настроен правильно. Да, включенные безразмерные значения height и width будут переопределены с помощью CSS. Целью включения этих атрибутов является резервирование пространства с правильным соотношением сторон, что повышает производительность за счет уменьшения смещения макета. Загрузка страницы по-прежнему будет занимать примерно такое же время, но пользовательский интерфейс не будет переключаться при отображении изображения на экране.

Другие особенности изображения

Элемент <img> также поддерживает атрибуты crossorigin , decoding , referrerpolicy и, в браузерах на основе Blink, fetchpriority . Используется редко, если изображение является частью карты на стороне сервера, включите логический атрибут ismap и вставьте <img> в ссылку для пользователей без указывающих устройств.

Атрибут ismap не является необходимым и даже не поддерживается для <input type="image" name="imageSubmitName"> поскольку координаты x и y места щелчка передаются во время отправки формы, добавляя значения к входному имени. , если таковые имеются. Например, что-то вроде &imageSubmitName.x=169&imageSubmitName.y=66 будет отправлено вместе с формой, когда пользователь щелкнет изображение, отправив его. Если у изображения нет атрибута name , отправляются x и y: &x=169&y=66 .

Проверьте свое понимание

Проверьте свои знания изображений.