Изображения

Праметр Описание
src Указывает URL изображения
srcset Список из одной или более строк, определяющий множество размеров изображений, которые браузер может использовать в разных ситуациях (например, дисплеи с высоким разрешением, небольшие мониторы и т. д.)
sizes Список из одной или более строк, определяющий множество исходных размеров изображения.
crossorigin Указывает, как элемент обрабатывает CORS-запросы
usemap Cвязывает между собой картинку и карту-изображение, задаваемую с помощью контейнера <map>.
alt Альтернативный текст, который должен отображаться, если по какой-либо причине не может отображаться изображение
width Задает ширину изображения (необязательно)
height Задает высоту изображения (необязательно)

Чтобы добавить изображение на страницу, используйте тег <img>. Теги изображений (img) не имеют закрывающих тегов. В теге <img> обычно указывают два основных атрибута: src - адрес изображения и alt, который является альтернативным текстом, описывающим изображение.

<img src="images/hello.png" alt="Hello World">

Вы также можете получать изображения из веб-URL:

<img src="https://i.stack.imgur.com/ALgZi.jpg?s=48&g=1" alt="StackOverflow user Caleb Kleveter">

Примечание. Изображения не привязаны к тексту на странице HTML, изображения связаны с HTML-страницами. Тег <img> создает пространство для хранения изображения, указанного в качестве источника.

Кроме того, возможно встроить изображения непосредственно внутри страницы с помощью base64:

<img src="data:image/png;base64,iVBOR..." alt="Hello World">

Совет. Чтобы изображение ссылалось на другой документ, просто вставьте тег <img> внутри тегов <a>.

Альтернативный текст используется специальными браузерами для людей с ослабленным зрением и поисковыми системами. Поэтому важно написать хороший альт-текст для ваших изображений. Текст должен выглядеть корректно, даже если вы замените изображение его атрибутом alt. Например:

<!-- Incorrect -->
<img src="anonymous.png" alt="Аватар анонимного пользователя"/> 
Анонимный  пользователь написал:
<blockquote>Привет, народ!</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Значок Правка"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Значок Удалить"/></a>

Без изображений это будет выглядеть так:

Аватар анонимного пользователя Анонимный пользователь написал:

Привет, народ!
Значок Правка / Значок Удалить

Чтобы исправить это:

  • Удалите альт-текст для аватара. Это изображение добавляет информацию для зрячих пользователей (легко идентифицируемый значок, чтобы показать, что пользователь анонимный), но эта информация уже доступна в тексте.
  • Удалите «Значок» из альт-текста для значков. Слово "Значок" не поможет передать ее фактическое назначение.
    <!-- Incorrect -->
    <img src="anonymous.png" alt=""/> 
    Анонимный  пользователь написал:
    <blockquote>Привет, народ!</blockquote>
    <a href="https://google.com/"><img src="edit.png" alt="Правка"/></a> /
    <a href="https://google.com/"><img src="delete.png" alt="Удалить"/></a>

    Без изображений это будет выглядеть так:

    Анонимный пользователь написал:

    Привет, народ!
    Правка / Удалить

    Существует семантическая разница между включением пустого атрибута alt и его исключением. Пустой атрибут alt указывает на то, что изображение не является ключевой частью содержимого (как это верно в вышеприведенном случае - это просто дополнительное изображение, не несущее особый смысл) и, следовательно, может быть опущено из рендеринга. Однако отсутствие атрибута alt указывает, что изображение является ключевой частью содержимого и что для текстовой интерпритации просто нет текстового эквивалента.

    <img sizes="(min-width: 1200px) 580px,
    (min-width: 640px) 48vw,
    98vw"
    srcset="img/hello-300.jpg 300w,
    img/hello-600.jpg 600w,
    img/hello-900.jpg 900w,
    img/hello-1200.jpg 1200w"
    src="img/hello-900.jpg" alt="hello">

    размеры похожи на медиа-запросы, описывающие, сколько места занимает изображение в видимой области (viewport).

  • если размер видимой области больше 1200 пикселей, изображение составляет ровно 580 пикселей (например, наш контент находится в центре контейнера с максимальным размером 1200 пикселей в ширину, а изображение занимает половину минус отступы margin).
  • если размер видимой области находится между 640px и 1200px, изображение занимает 48% видимой области (например, изменение масштаба изображения вместе со страницей занимает половину ширины видимой области минус отступы margin).
  • если видимая область имеет любой другой размер, в нашем случае менее 640 пикселей изображение занимает 98% видимой области (например, изменение масштаба изображения вместе со страницей занимает полную ширину видимой области минус отступы margin). При этом состояние устройства должно быть опущено для последнего элемента.

Атрибут srcset просто сообщает браузеру, какие изображения у нас есть, и каковы их размеры:

  • img/hello-300.jpg is 300px wide,
  • img/hello-600.jpg is 600px wide,
  • img/hello-900.jpg is 900px wide,
  • img/hello-1200.jpg is 1200px wide

Атрибут src всегда является обязательным для указания источника изображения. В случае использования совместно с srcset, src будет служить резервным указанием источника изображения, если браузер не поддерживает атрибут srcset.

<img src="img/hello-300.jpg" src всегда является обязательным источником изображения. В случае использования с srcset, src будет служить резервным изображением в случае, если браузер не поддерживает srcset.alt="hello"
 srcset="img/hello-300.jpg 1x,
 img/hello-600.jpg 2x,
 img/hello-1200.jpg 3x">

Атрибут srcset предоставляет список доступных изображений с дескриптор плотности пикселей.

  • если дескриптор плотности пикселей равен 1, используется img/hello-300.jpg
  • если дескриптор плотности пикселей равен 2, используется img/hello-600.jpg
  • если дескриптор плотности пикселей равен 3, используется img/hello-1200.jpg

Атрибут src всегда является обязательным для указания источника изображения. В случае использования совместно с srcset, src будет служить резервным указанием источника изображения, если браузер не поддерживает атрибут srcset.

<picture>
    <source media="(min-width: 600px)" srcset="large_image.jpg">
    <source media="(min-width: 450px)" srcset="small_image.jpg">
    <img src="default_image.jpg" style="width:auto;">
</picture>

Чтобы отображать разные изображения при различной ширине экрана, вы должны включать все изображения, используя тег <source> в теге <picture>, как показано в вышеприведенном примере.

  • На экранах с шириной экрана больше 600 пикселей, будет показано large_image.jpg
  • На экранах с шириной экрана больше 450 пикселей, будет показано small_image.jpg
  • На экранах с другой шириной экрана будет показано default_image.jpg