Праметр | Описание |
---|---|
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).
Атрибут srcset
просто сообщает браузеру, какие изображения у нас есть, и каковы их размеры:
Атрибут 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
предоставляет список доступных изображений с дескриптор плотности пикселей.
Атрибут 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>
, как показано в вышеприведенном примере.