Изображения¶

Обзор изображений в HTML.

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

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

1

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

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

1
2
3
4
5
6

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

1
2
3
4
5
6
7
8

<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-сообщениях, поскольку многие пользователи блокируют изображения в своих почтовых приложениях.

1

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

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

1

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

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

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

Чтобы написать эффективный альтернативный текст, представьте, что вы читаете всю страницу человеку, который не может ее видеть. С помощью элемента semantic <img> пользователи и боты, читающие с экрана, получают информацию о том, что данный элемент является изображением. Включать в alt фразу "This is an image/screenshot/photo of" является излишним. Пользователю не нужно знать, что это изображение, но ему нужно знать, какую информацию передает изображение.

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

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

Если фотография является частью страницы усыновления Пушистика на сайте приюта для животных, то целевой аудиторией является потенциальный родитель собаки. Текст должен описывать информацию, переданную на изображении, которая важна для усыновителя и не дублируется в окружающем тексте. Уместно более длинное описание, например, alt="Пушистик, трехцветный терьер с очень короткой шерстью, с теннисным мячиком во рту". В тексте страницы, посвященной усыновлению, обычно указываются вид, порода, возраст и пол усыновляемого животного, поэтому их не нужно повторять в тексте alt. Но в письменной биографии собаки, скорее всего, не будет указана длина шерсти, цвет и предпочтения в игрушках. Обратите внимание, что мы не описывали изображение: потенциальному владельцу собаки не нужно знать, находится ли она в помещении или на улице, или что у нее красный ошейник и синий поводок.

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

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

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

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

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

1

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

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

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

1

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

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

1
2
3
4
5

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

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

1

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

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

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

1
2
3
4
5

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

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

1
2
3
4
5

<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-адрес актива, за которым следует пробел, а затем дескрипторы для данного варианта изображения. Если используется дескриптор ширины, то для каждого параметра srcset, кроме последнего, необходимо также включить атрибут sizes с медиазапросом или размером источника. Стоит ознакомиться с разделами, посвященными отзывчивым изображениям с 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 указывает браузеру, поддерживающему JS, как загружать изображение. Значение по умолчанию eager означает, что изображение загружается сразу же после разбора HTML, даже если оно находится за пределами видимой области просмотра. При установке значения loading="lazy" загрузка изображения откладывается до тех пор, пока оно, скорее всего, не попадет в область просмотра. "Вероятность" определяется браузером на основе расстояния, на котором изображение находится от области просмотра. Это значение обновляется по мере прокрутки изображения пользователем. Ленивая загрузка позволяет экономить полосу пропускания и процессор, повышая производительность для большинства пользователей. Если JavaScript отключен, то в целях безопасности все изображения по умолчанию будут иметь значение eager.

1

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

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

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

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

1
2
3
4
5
6
7

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

Источник¶

• Images

Комментарии