HTML Изображения
Вставка изображений с тегом img: атрибуты src и alt, width/height для предотвращения сдвига макета, адаптивные srcset и picture, ленивая загрузка.
Чтобы вставить изображение на веб-страницу, используйте тег <img>.
Тег <img> поддерживает ряд обязательных и необязательных атрибутов, которые предоставляют дополнительную информацию о нём.
Синтаксис
Тег <img> является пустым, то есть закрывающий тег не требуется. Он содержит только атрибуты. Но в XHTML тег (<img>) должен быть закрыт (<img/>).
Обязательные атрибуты изображения — src и alt
Атрибут src (source) задаёт имя или расположение отображаемого изображения. Его значением может быть относительный путь (файл в вашем проекте) или абсолютный URL (изображение, размещённое на стороннем сервере).
Относительный путь — изображение находится в вашем проекте, рядом с HTML-файлом:
<img src="images/example.jpg" alt="A description of the image" />Абсолютный URL — изображение размещено на другом сервере:
<img src="https://www.example.com/images/example.jpg" alt="A description of the image" />Атрибут alt предоставляет альтернативный текст, который отображается, если изображение не загрузилось (медленное соединение, неверный путь), а также зачитывается программами чтения с экрана. Существует два случая:
- Значимые изображения — укажите в
altкраткое и точное описание того, что передаёт изображение (alt="Bar chart of 2024 sales"). - Декоративные изображения, не несущие смысловой нагрузки, — используйте пустой атрибут
alt="". Программы чтения с экрана тогда пропускают изображение, вместо того чтобы объявлять бессмысленное имя файла.
Всегда включайте этот атрибут. Полное отсутствие alt отличается от alt="" и считается ошибкой доступности.
Примечание: поведение всплывающей подсказки при наведении управляется атрибутом title, а не alt.
Синтаксис тега <img> с обязательными атрибутами src и alt выглядит так:
Пример HTML-изображения
<img src="example.jpg" alt="HTML tutorial" />Используйте атрибут alt для всех изображений, чтобы предоставить чёткое, краткое описание содержимого изображения — это улучшает доступность и помогает поисковым системам понять вашу страницу.
Рекомендуемые атрибуты изображения — width и height
Всегда задавайте атрибуты width и height для тега <img>. Они сообщают браузеру соотношение сторон изображения до того, как файл будет загружен, позволяя с самого начала зарезервировать нужное количество пространства в макете.
Без них страница перестраивается в момент загрузки каждого изображения — текст и другие элементы смещаются вниз, освобождая место. Этот визуальный скачок называется Cumulative Layout Shift (CLS) — один из показателей Core Web Vitals от Google и частая причина случайных кликов. Указание размеров предотвращает это.
Пример HTML-изображения
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Атрибуты принимают целые числа пикселей без единиц (width="200", а не width="200px"). Вы по-прежнему можете изменять размер изображения с помощью CSS — браузер использует значения атрибутов только для вычисления соотношения сторон и предотвращения сдвига макета.
Пример тега HTML <img> с атрибутами src, alt, width и height:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<p>This is Aleq's photo</p>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Результат
Сохраняйте атрибуты width и height для соотношения сторон, а затем используйте CSS-свойства max-width или max-height для гибкости. Это предотвратит выход крупных изображений за пределы макета на небольших экранах.
Адаптивные изображения (responsive)
Чтобы изображение не выходило за пределы контейнера на узких экранах, добавьте следующее правило CSS. Это наиболее полезная строка CSS для изображений:
img {
max-width: 100%;
height: auto;
}max-width: 100% ограничивает отображаемую ширину изображения шириной его контейнера: изображение сжимается на небольших экранах, но никогда не масштабируется вверх относительно своего натурального размера, не становясь размытым. height: auto позволяет высоте изменяться пропорционально, сохраняя пропорции изображения.
Это работает в сочетании с атрибутами width/height: атрибуты резервируют пространство под соотношение сторон (без CLS), а CSS делает фактический отображаемый размер гибким.
Обтекание изображения текстом
По умолчанию элемент <img> является строчным и располагается в строке текста. Вы можете обернуть текст вокруг изображения с помощью CSS-свойства float — установите float: left или float: right.
Float — это устаревшая техника для подобных макетов. Для всего, что выходит за рамки простого обтекания одного изображения текстом — галерей, медиа-элементов бок о бок, карточек — используйте Flexbox или CSS Grid. Они обеспечивают выравнивание, отступы и перенос без причуд с очисткой, которые требует float.
Чтобы показать изображение слева, а текст справа, добавьте float: left. Предпочитайте CSS-класс встроенному атрибуту style для удобства сопровождения.
Пример тега <img> и CSS-свойства float для обтекания изображения слева:
Пример изображения с float|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>Добавление атрибута style="float:right" к тегу <img> располагает текст слева, а изображение справа.
Пример тега <img> и CSS-свойства float для обтекания изображения справа:
Пример с атрибутом float:right|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>Результат
Как добавить гиперссылку на изображение
Поскольку тег <a> используется для вставки гиперссылок, достаточно поместить изображение внутрь тега <a>, чтобы сделать его кликабельным.
Пример тегов <a> и <img> для добавления гиперссылки на изображение:
Пример изображения с гиперссылкой
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Адаптивные изображения: выбор подходящего файла
Одно изображение редко подходит для всех экранов. Отправка фотографии 2000px на телефон расходует трафик; отправка маленькой на 4K-дисплей выглядит размыто. HTML предоставляет два инструмента, позволяющих браузеру выбрать наилучший файл для каждого устройства.
srcset и sizes (одно изображение разных размеров)
Используйте атрибуты srcset и sizes у тега <img>, когда у вас есть одно и то же изображение в нескольких ширинах и вы хотите, чтобы браузер скачал наиболее подходящее.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
width="800"
height="600"
alt="A scenic mountain lake"
/>srcsetперечисляет файлы-кандидаты с их собственными ширинами (400wозначает, что файл имеет ширину 400px).sizesсообщает браузеру, какой будет отображаемая ширина изображения — здесь полная ширина viewport при ширине до 600px, иначе половина. Браузер сочетает это с пиксельной плотностью устройства для выбора наименьшего файла, который всё равно выглядит чётко.srcостаётся как запасной вариант для очень старых браузеров.
Элемент picture (разные форматы или художественное оформление)
Элемент <picture> оборачивает несколько элементов <source> и один <img>. Браузер перебирает источники сверху вниз и использует первый поддерживаемый, а если ни один не подошёл — <img> в качестве запасного варианта.
Классическое применение — подача современного, более лёгкого формата с гарантированным запасным вариантом:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" />
</picture>Браузер, поддерживающий AVIF, скачивает AVIF-файл; понимающий только WebP — использует его; всё остальное переключается на JPEG. Тег <img> обязателен — он предоставляет текст alt и запасной вариант. Также можно использовать <picture> для художественного оформления: отображать обрезанное вертикальное изображение на телефонах и широкое на десктопах с помощью атрибутов media у каждого <source>.
Ленивая загрузка и декодирование
По умолчанию браузер загружает все изображения на странице немедленно. Для изображений далеко ниже видимой области это напрасные затраты. Добавьте loading="lazy", чтобы браузер получал изображение только при его приближении к viewport:
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" loading="lazy" />Используйте loading="lazy" для внеэкранных изображений, но не для самого крупного изображения в верхней части страницы (например, главного баннера или LCP-элемента) — откладывание его загрузки замедлит воспринимаемую скорость загрузки.
Также можно добавить decoding="async", что позволяет браузеру декодировать изображение в фоновом потоке, не блокируя рендеринг окружающего контента.
Какой формат изображения выбрать для веба
Существует три основных типа форматов изображений, поддерживаемых браузерами:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF поддерживает 256 уникальных цветов, что делает его подходящим для простой и быстро загружаемой графики. Вы можете использовать GIF для небольших рисунков, диаграмм, схем, кнопок и другой простой графики, которая не замедлит загрузку страницы.
JPEG — это обычно 24-битный формат, сочетающий красный, синий и зелёный свет для отображения миллионов цветов. Поэтому он используется преимущественно для фотографий. Этот формат позволяет выбрать степень сжатия изображения — от 0% (сильное сжатие) до 100% (без сжатия). Вы можете выбрать этот формат, если готовы пожертвовать некоторым качеством ради уменьшения размера. Избегайте использования JPEG для изображений с текстом, фигурами или большими цветовыми блоками, поскольку при сжатии файла линии размываются, а цвета смещаются.
Формат PNG сочетает в себе преимущества JPEG и GIF: поддерживает миллионы цветов и позволяет сжатие без потерь. Вы можете использовать PNG для веб-графики, требующей прозрачности, насыщенных цветов и сложной графики или фотографий.
Современные форматы изображений
Два современных формата теперь широко поддерживаются браузерами и создают файлы меньшего размера с более быстрой загрузкой по сравнению с JPEG или PNG.
WebP, разработанный Google, поддерживает как сжатие без потерь, так и с потерями, а также прозрачность и анимацию. Файлы WebP, как правило, на 25–35% меньше эквивалентных файлов JPEG или PNG и поддерживаются во всех актуальных основных браузерах. (WebP - Wikipedia)
AVIF — более новый формат, основанный на видеокодеке AV1. Как правило, он сжимает даже лучше, чем WebP при одинаковом визуальном качестве, и поддерживает широкий диапазон цветов, что делает его отличным выбором для фотографий. Поддержка браузерами сейчас широка, но немного уступает WebP.
Поскольку браузер не каждого посетителя поддерживает новейший формат, подавайте их с помощью элемента <picture> и запасным вариантом в формате JPEG или PNG, как показано в разделе об адаптивных изображениях выше. Браузер тогда выберет наилучший поддерживаемый им формат.
Вы всё ещё можете встретить старые форматы, такие как BPG и HEIC от Apple. Ни один из них не поддерживается веб-браузерами, поэтому избегайте их для изображений в вебе — конвертируйте в WebP или AVIF.