HTML-изображения
Чтобы встроить изображение на веб-страницу, используйте тег <img>.
Тег <img> поддерживает ряд обязательных и необязательных атрибутов, которые предоставляют о нём дополнительную информацию.
Синтаксис
Тег <img> является пустым, то есть закрывающий тег не требуется. Он содержит только атрибуты. Но в XHTML тег (<img>) должен быть закрыт (<img/>).
Обязательные атрибуты изображения — src и alt
Атрибут src (source) указывает имя или расположение изображения, которое нужно отобразить. Значение атрибута src должно содержать имя файла изображения или его URL.
Пример URL
<img src="example.jpg" />
or
<img src="https://www.example.com/images/example.jpg" />Атрибут alt также обязателен для тега <img>. Он используется для предоставления браузерам альтернативного текста на случай, если изображение не может быть отображено (например, при медленном соединении, при использовании экранного диктора и т. д.). Примечание: поведение всплывающей подсказки при наведении на самом деле управляется атрибутом title, а не alt.
Синтаксис тега <img> с обязательными атрибутами src и alt будет выглядеть так:
Пример HTML-изображения
<img src="example.jpg" alt="HTML tutorial" />TIP
Используйте атрибут alt для всех изображений, чтобы дать чёткое и краткое описание содержимого изображения, что повышает доступность и помогает поисковым системам понять вашу страницу.
Рекомендуемые атрибуты изображения — width и height
Атрибуты width и height настоятельно рекомендуется использовать с тегом <img>. Если эти атрибуты заданы, браузер резервирует место для изображения при загрузке содержимого, и это ускоряет отображение страницы.
Пример HTML-изображения
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Пример тега HTML <img> с атрибутами src, alt, width и height:
Заголовок изображения|Пример|W3Docs
<!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://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Результат
TIP
Вместо использования размеров width и height вы можете задать размер с помощью CSS-свойств max-width или max-height, чтобы получить дополнительную гибкость. Это может предотвратить нарушение макета из-за больших изображений на устройстве с маленьким экраном.
Обтекание изображения
По умолчанию элемент <img> является строчным, поэтому текст обтекает его. Однако вы можете управлять макетом с помощью CSS-свойства float. Это свойство определяет, как должно «плавать» изображение или как должен обтекать его текст. (Примечание: хотя исторически для этого использовалось свойство float, в современных макетах обычно применяются Flexbox или Grid для лучшего контроля.)
Чтобы показать изображение слева, а текст справа, добавьте style="float:left" к тегу <img>. Для лучшей поддерживаемости рассмотрите возможность переноса встроенных стилей в CSS-класс.
Пример тега <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://ru.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://ru.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://ru.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Какой формат изображения выбрать для веба
Существует три основных типа форматов изображений, поддерживаемых браузерами:
- 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 для веб-графики, требующей прозрачности, а также для насыщенной цветами и сложной графики или фотографий.
Современные форматы изображений
Сегодня для веба используются несколько современных форматов изображений, чтобы получать более компактные, более качественные и быстрее загружающиеся изображения.
WebP, разработанный Google, обеспечивает сжатие изображений без потерь и с потерями для веба. Его главная цель — стать основным форматом для фотографий в интернете, заменив JPEG. (WebP - Wikipedia)
Другой формат, разработанный для замены JPEG, — это BPG (Better Portable Graphics), который также может похвастаться высоким коэффициентом сжатия (файлы меньше, чем JPEG при том же качестве).
HEIC — это новый формат изображений, который Apple использует вместо JPEG в iOS 11. Этот формат использует современные методы сжатия, что позволяет получать более высокое качество изображения в файлах меньшего размера.
Практика
Какие из следующих тегов и атрибутов можно использовать при определении изображений в HTML?