Тег <img>: изображения на странице
Как вставить изображение, задать размеры и описать его для тех, кто не видит картинку.
Зачем нужен этот элемент
Элемент img встраивает изображение в документ. Это пустой элемент: у него нет закрывающего тега и вложенного текста. Путь задаётся в src, а смысловое описание — в alt. Описание должно передавать информацию изображения в текущем контексте, а не начинаться со слов «На картинке».
Укажите width и height с исходным соотношением сторон. Тогда браузер сможет заранее зарезервировать место и текст не будет прыгать при загрузке. Для адаптивности используйте max-width: 100% и height: auto. Ленивую загрузку оставляйте для изображений ниже первого экрана.
Синтаксис и пример
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80'%3E%3Crect width='240' height='80' fill='%2311694e'/%3E%3C/svg%3E"
alt="Зелёный образец фирменного цвета"
width="240" height="80"
style="max-width:100%;height:auto">Что важно в разметке
| Параметр | Как использовать |
|---|---|
| src | Путь к файлу изображения. |
| alt | Описание смысла; пустая строка для чисто декоративной картинки. |
| width / height | Исходные размеры для сохранения пропорций. |
| loading="lazy" | Отложенная загрузка вне первого экрана. |
Частая ошибка
Небольшая практика
Измените ширину картинки через CSS, сохранив пропорции. В песочнице внешние картинки отключены: пример использует встроенное изображение. На своём сайте замените src локальным файлом.
Разберите также <figure>, <a>: эти элементы пригодятся в том же интерфейсе.