Изображения

Декоративные изображения, такие как фоновые градиенты на кнопках или фоновые изображения в разделах контента или на всей странице, являются презентационными и должны применяться с помощью 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 фразу «Это изображение/скриншот/фотография» излишне. Пользователю не обязательно знать, что там есть изображение, но ему нужно знать, какую информацию оно несёт.

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

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

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

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

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

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

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

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

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

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

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

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

Журнал, будучи исключительно декоративным, имеет пустой атрибут alt и role , равное none , поскольку изображение представляет собой исключительно презентационный 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 , но в source он, как правило, реализован немного иначе, поскольку медиа-запросы можно перечислить в атрибуте media элемента <srcset> . <source> также поддерживает форматы изображений, определённые в атрибуте type .

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

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

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

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

Атрибут loading сообщает браузеру с поддержкой JavaScript, как загружать изображение. Значение по умолчанию 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 .

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

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