HTML
Изображений

Синтаксис

• <img src="" alt="">

параметры

Создание изображения

Чтобы добавить изображение на страницу, используйте тег изображения.

Теги изображений ( 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> тег <img> внутри тегов <a> .

Ширина и высота изображения

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

Размеры изображения могут быть указаны с использованием атрибутов width и height тега изображения:

<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">

Указав width и height изображения, ваша структура дает браузеру подсказку о том, как должна быть выложена страница, даже если вы просто указали фактический размер изображения. Если размеры изображения не указаны, браузеру необходимо будет пересчитать макет страницы после загрузки изображения, что может привести к тому, что страница «скачет» во время загрузки.

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">

<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">

<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">

<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">

Выбор alt text

Alt-текст используется читателями экрана для пользователей с ослабленным зрением и поисковыми системами. Поэтому важно написать хороший альт-текст для ваших изображений.

Текст должен выглядеть корректно, даже если вы замените изображение его атрибутом alt. Например:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

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

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

Lorem ipsum dolor sed.

Значок редактирования / Удалить значок

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

• Удалите альт-текст для аватара. Это изображение добавляет информацию для зрячих пользователей (легко идентифицируемый значок, чтобы показать, что пользователь анонимный), но эта информация уже доступна в тексте. ¹
• Удалите «значок» из альт-текста для значков. Зная, что это будет икона, если она там, не поможет передать ее фактическую цель.

<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

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

Lorem ipsum dolor sed.

Изменить / Удалить

Сноски

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

Отзывчивое изображение с использованием атрибута srcset

Использование srcset с размерами

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

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

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

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

• img/hello-300.jpg 300.jpg имеет ширину 300 пикселей,
• img/hello-600.jpg имеет ширину img/hello-600.jpg пикселей,
• img/hello-900.jpg имеет ширину 900 пикселей,
• img/hello-1200.jpg имеет ширину img/hello-1200.jpg пикселей

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

Использование srcset без размеров

<img src="img/hello-300.jpg" alt="hello"
     srcset="img/hello-300.jpg 1x, 
       img/hello-600.jpg 2x,
       img/hello-1200.jpg 3x">

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

• если отношение img/hello-300.jpg устройства к пикселю равно 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>

использование

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

Результат

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