HTML-тег <img>
Тег <img>: атрибуты src и alt, адаптивные srcset/sizes, ленивая загрузка, width/height для CLS, форматы изображений и обработка ошибок.
Тег <img> используется для вставки изображения в HTML-документ. Само изображение не встраивается непосредственно в документ — браузер загружает его из источника, указанного в теге <img>.
У элемента <img> есть два обязательных атрибута: src, указывающий источник изображения, и alt, задающий альтернативный текст для изображения.
Чтобы сделать HTML-изображения кликабельными, нужно поместить тег <img> внутрь тега <a>, который используется для создания ссылки на изображение.
Синтаксис
Тег <img> является пустым, то есть закрывающий тег не требуется. Он содержит только атрибуты. Однако в XHTML тег <img> должен быть самозакрывающимся (<img />).
Пример HTML-тега <img>:
Пример использования HTML-тега <img>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>С помощью CSS можно изменить внешний вид изображения.
Пример тега <img> со стилями CSS:
Как стилизовать HTML-тег <img> с помощью свойств vertical-align и padding в CSS?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
border-radius: 50%;
border: 4px dashed #077cb9;
width: 300px;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="/uploads/media/default/0001/03/e91b0d7a957cadd0c3282d34e423ff0f97799a1d.jpeg" alt="Ararat mountain" width="256" height="256" />
</div>
</body>
</html>Атрибуты src и alt
Атрибут src (source — источник) указывает источник изображения. Он обязателен, так как задаёт путь к изображению. Значением атрибута src может быть как имя файла, так и его URL.
Атрибут alt задаёт альтернативный текст для изображения. Он также обязателен для тега <img>. Его значение — описательный текст, который отображается в браузере до загрузки изображения или если изображение не удалось загрузить.
Декоративные и информативные изображения
Наличие текста в атрибуте alt зависит от назначения изображения:
- Информативные изображения (фото товара, диаграмма, логотип, несущий смысл) требуют короткого описательного текста
alt, передающего ту же информацию, что и само изображение. Описывайте что изображено, а не «изображение с». - Декоративные изображения (разделители, заглушки, фоновые украшения, не несущие смысловой нагрузки) должны использовать пустой
alt="". Это указывает экранным дикторам пропустить изображение. Не опускайте атрибутaltсовсем — его отсутствие приводит к тому, что некоторые экранные дикторы озвучивают имя файла.
<!-- Meaningful: describe the content -->
<img src="ararat.jpg" alt="Snow-capped Mount Ararat at sunrise" />
<!-- Decorative: empty alt so assistive tech skips it -->
<img src="divider.png" alt="" />Для информативных изображений включайте релевантные ключевые слова в альтернативный текст там, где это уместно. Точный текст alt помогает как доступности, так и позиции изображения в поисковых системах.
Использование "data:image/[type];base64,[base64-string]" в атрибуте src
Формат data:image/[type];base64,[base64-string] можно использовать в качестве значения атрибута src тега img для отображения изображения прямо из HTML-кода, без загрузки из внешнего файла.
Вот пример использования этого формата для отображения изображения в теге img:
Использование "data:image/[type];base64,[base64-string]" в атрибуте src
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
alt="Tiny base64-encoded sample image"
width="5"
height="5">В этом примере image/png указывает MIME-тип изображения, а длинная строка после base64, — это данные изображения, закодированные в base64. Приведённая строка представляет собой полноценный (хоть и крошечный) PNG-файл размером 5×5 пикселей.
Обратите внимание, что использование изображений в формате base64 увеличивает размер HTML-файла и может замедлить загрузку страницы. Как правило, этот формат рекомендуется использовать для небольших изображений или иконок, а для более крупных изображений — внешние файлы.
Пример HTML-тега <img> с атрибутами src и alt:
Пример тега img с атрибутами src и alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="/uploads/media/default/0001/03/01cc5ccf0ce755075e468cc651f27c354e1b032e.jpeg" alt="Paris" width="256" height="256" />
</body>
</html>Зачем задавать ширину и высоту
Всегда задавайте атрибуты width и height (в пикселях, без единиц измерения), соответствующие реальным размерам изображения. Это позволяет браузеру вычислить соотношение сторон изображения и зарезервировать нужное пространство до завершения загрузки файла. Без этих атрибутов страница сначала отрисовывается без места для изображения, а затем смещается при его появлении — это ухудшает опыт пользователя и негативно влияет на Cumulative Layout Shift (CLS), один из показателей Core Web Vitals от Google.
<!-- Browser reserves a 4:3 box immediately, so no layout shift -->
<img src="photo.jpg" alt="Mountain view" width="800" height="600">Изображение по-прежнему можно масштабировать через CSS. Распространённый и надёжный подход — задать атрибуты width и height для соотношения сторон, а затем сделать изображение адаптивным с помощью CSS:
img {
height: auto; /* preserve aspect ratio */
max-width: 100%; /* never overflow its container */
}Атрибуты loading и decoding
Атрибут loading откладывает загрузку изображения (и iframe) до тех пор, пока ресурс не окажется достаточно близко к области видимости. Это стандартная функция, поддерживаемая всеми современными браузерами.
Допустимые значения атрибута loading:
lazy— откладывает загрузку до тех пор, пока изображение не приблизится к viewport на заданное расстояние. Используйте для изображений ниже сгиба / вне экрана.eager(по умолчанию) — немедленно загружает ресурс.
<img src="defer.png" loading="lazy" alt="Gallery thumbnail" width="500" height="400">Не применяйте ленивую загрузку к самому важному изображению в верхней части страницы (часто это элемент Largest Contentful Paint, или LCP). Ленивая загрузка задерживает его запрос и делает страницу медленнее. Для такого изображения используйте loading="eager" или просто не указывайте атрибут.
Связанный атрибут decoding подсказывает браузеру, как декодировать изображение. decoding="async" позволяет браузеру декодировать изображение в отдельном потоке, не блокируя отрисовку окружающего контента:
<img src="photo.jpg" alt="Landscape" width="800" height="600"
loading="lazy" decoding="async">Отложенная загрузка переносит загрузку ресурсов на момент, когда они действительно нужны, вместо того чтобы загружать всё сразу. Это улучшает производительность и снижает излишний расход трафика на устройстве пользователя.
Адаптивные изображения: srcset и sizes
Одно фиксированное изображение либо расходует лишний трафик на маленьких экранах, либо выглядит размыто на больших. Атрибуты srcset и sizes позволяют браузеру выбрать наиболее подходящий файл с учётом размера экрана и плотности пикселей устройства, сохраняя при этом один элемент <img>.
srcsetперечисляет варианты изображений, каждый из которых сопровождается дескриптором ширины (реальная ширина изображения в пикселях, например480w).sizesсообщает браузеру, какой будет отображаемая ширина изображения при разных брейкпоинтах, чтобы он мог сделать выбор до вычисления макета.
<img
src="photo-800.jpg"
srcset="photo-480.jpg 480w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 50vw,
800px"
alt="Coastline at sunset"
width="800" height="600">Здесь браузер читает sizes, вычисляет необходимое количество CSS-пикселей для изображения, умножает на плотность пикселей устройства и загружает наиболее подходящий вариант из srcset. Обычный src остаётся запасным вариантом для браузеров, не поддерживающих srcset.
Если нужно предоставить разные кадрировки для разных макетов (художественное управление) или предложить современные форматы с запасным вариантом (например, AVIF/WebP с резервным JPEG), используйте элемент <picture>.
Поддерживаемые форматы изображений
Форматы файлов изображений — это стандартизированные способы организации и хранения цифровых изображений. Формат файла изображения может хранить данные в несжатом виде, в сжатом формате (с потерями или без) или в формате векторной графики. (Wikipedia).
Разные браузеры поддерживают разные форматы изображений. Ниже приведён список распространённых форматов:
| Аббревиатура | Формат файла | MIME-тип | Расширение(я) файла | Совместимость с браузерами |
|---|---|---|---|---|
| APNG | Animated Portable Network Graphics | image/apng | .apng | Chrome, Edge, Firefox, Opera, Safari |
| AVIF | AV1 Image File Format | image/avif | .avif | Chrome 85+, Firefox 93+, Safari 16+, Opera |
| GIF | Graphics Interchange Format | image/gif | .gif | Chrome, Edge, Firefox, Opera, Safari |
| ICO | Microsoft Icon | image/x-icon | .ico, .cur | Chrome, Edge, Firefox, Opera, Safari |
| JPEG | Joint Photographic Expert Group image | image/jpeg | .jpg, .jpeg, .jfif, .pjpeg, .pjp | Chrome, Edge, Firefox, Opera, Safari |
| PNG | Portable Network Graphics | image/png | .png | Chrome, Edge, Firefox, Opera, Safari |
| SVG | Scalable Vector Graphics | image/svg+xml | .svg | Chrome, Edge, Firefox, Opera, Safari |
| WebP | Web Picture format | image/webp | .webp | Chrome, Edge, Firefox, Opera, Safari 14+ |
JPEG и PNG поддерживаются повсеместно и остаются самыми безопасными вариантами по умолчанию. WebP и AVIF — современные форматы, обеспечивающие заметно меньший размер файлов при сопоставимом качестве: AVIF, как правило, сжимает лучше всего, а WebP имеет наибольшую поддержку. Поскольку ряд старых браузеров не поддерживает AVIF, рекомендуется предоставлять эти форматы через элемент <picture> с запасным вариантом в виде JPEG или PNG, а не использовать их напрямую в <img src>.
Ошибки загрузки изображений
При загрузке изображения могут возникать ошибки. Если для события error задан обработчик onerror, он будет вызван. Это может произойти в следующих ситуациях:
- Атрибут src пуст ("") или имеет значение null.
- URL из атрибута src совпадает с URL текущей страницы.
- Изображение повреждено и не может быть загружено.
- Метаданные изображения повреждены настолько, что невозможно получить его размеры, а в атрибутах тега
<img>размеры не указаны. - Формат не поддерживается браузером.
Вы можете отслеживать событие error с помощью атрибута onerror и подставлять запасное изображение, чтобы пользователи видели заглушку вместо значка сломанного изображения:
<img
src="profile.jpg"
alt="User profile photo"
width="200" height="200"
onerror="this.onerror=null; this.src='fallback.png';">Предварительная установка this.onerror=null важна: она удаляет обработчик перед изменением src, чтобы в случае, если запасное изображение тоже не загрузится, обработчик не сработал повторно и не вызвал бесконечный цикл.
Атрибуты
Ниже перечислены текущие стандартные атрибуты элемента <img>. Устаревшие атрибуты указаны отдельно ниже.
| Атрибут | Значение | Описание |
|---|---|---|
| alt | текст | Задаёт альтернативный текст для изображения. Используйте alt="" для чисто декоративных изображений. |
| crossorigin | anonymous | use-credentials | Определяет, используется ли CORS при загрузке изображения. Изображения, загруженные через CORS, можно использовать в элементе <canvas> без ограничения его функциональности. |
| decoding | sync | async | auto | Подсказывает браузеру, как декодировать изображение. async выполняет декодирование вне основного потока. |
| height | пиксели | Задаёт высоту изображения. Устанавливайте вместе с width, чтобы зарезервировать место и избежать смещения макета. |
| ismap | ismap | Указывает, что содержимое тега является серверной картой-изображением. |
| loading | eager | lazy | Определяет, загружается ли изображение немедленно или откладывается до приближения к viewport. |
| sizes | медиаусловия + размеры | Сообщает браузеру отображаемую ширину изображения для каждого брейкпоинта, используется вместе с srcset. |
| src | URL | Задаёт источник изображения. |
| srcset | URL + дескрипторы | Список через запятую изображений-кандидатов с дескрипторами ширины (w) или плотности пикселей (x). |
| usemap | #mapname | Указывает ссылку на элемент <map>, содержащий координаты клиентской карты-изображения. |
| width | пиксели | Задаёт ширину изображения. Устанавливайте вместе с height, чтобы зарезервировать место и избежать смещения макета. |
Тег <img> также поддерживает глобальные атрибуты и атрибуты событий.
Устаревшие атрибуты
Эти атрибуты устарели в HTML5. Вместо них используйте CSS-альтернативы.
| Атрибут | Значения | Описание | Альтернатива |
|---|---|---|---|
| align | left right top bottom middle | Задаёт выравнивание изображения относительно окружающих элементов. | Свойства CSS float и/или vertical-align. |
| border | пиксели | Задаёт ширину рамки вокруг изображения. | Свойство CSS border. |
| hspace | Свойство CSS margin. | ||
| name | Задаёт имя элемента. | Атрибут id. | |
| vspace | пиксели | Задаёт отступы сверху и снизу изображения. | Свойство CSS margin. |