Вставить картинку

Вставить картинку

Картинка вставляется через тег <img>.

<img src="/path/to/image.jpg" alt="Описание картинки">

Атрибут alt является обязательным атрибутом для тега <img>. Об этом упоминается в официальной документации HTML: html.spec.whatwg.org/multipage/images.html#alt (на англ).

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

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

Значение атрибута alt может быть пустым.

Картинка с описанием

Картинку с описанием можно вставить через тег <figcaption>.

<figure>
  <img src="image.jpg" alt="">
  <figcaption>Описание картинки</figcaption>
</figure>

Пример кода:

Несколько картинок

В теге <figure> можно вставлять несколько картинок:

<figure>
  <img src="/kookaburra.jpg" alt="Kooaburra">
  <img src="/pelican.jpg" alt="Pelican stood on the beach">
  <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
  <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by Richard Clark</figcaption>
</figure>

Пример кода:

Доступность

Если картинка используется как элемент дизайна, то рекомендуется указывать пустой атрибут alt или использовать атрибут role="presentation", чтобы скринридеры игнорировали данную картинку (иначе они будут озвучивать, что в данном месте находится картинка).

<!-- 1-ый способ: просто указать пустой alt -->
<img src="/path/to/image.jpg" alt="">

<!-- 2-ой способ: если alt заполнен, то указывается role="presentation" -->
<img src="/path/to/image.jpg" alt="Рамка" role="presentation">

При этом не рекомендуется использоваться пустой alt и role="presentation" одновременно.

<!-- не рекомендуется использовать role="presentation", т.к. уже указан пустой alt -->
<img src="/path/to/image.jpg" alt="" role="presentation">