HTML Изображения

Изображения играют важную роль в создании привлекательного и информативного веб-контента.

Пример:

<img src="pic_trulli.jpg" alt="Город Трулли в Италии">

Пример:

<img src="img_girl.jpg" alt="Девушка в куртке">

Пример:

<img src="img_chania.jpg" alt="Цветы в Чания">

Синтаксис изображений HTML

В HTML для встраивания изображений используется тег <img>, который позволяет добавлять графические элементы на веб-страницы.

Технически изображения не вставляются в веб-страницы; изображения по ссыке связываются с веб-страницами. Тег <img> создает пространство для отображения связанного изображения.

Тег <img> является пустым, т.е. содержит только атрибуты и не имеет закрывающего тега.

У тега <img> есть два обязательных атрибута:

src — задаёт путь к изображению
alt — задаёт альтернативный текст для изображения

Синтаксис тега <img> выглядит следующим образом:

<img src="url" alt="альтернативный текст">

Атрибуты тега

Тег <img> имеет несколько важных атрибутов, которые определяют, как изображение будет отображаться на странице.

Атрибут src

Атрибут src определяет путь (URL) к изображению. Это обязательный атрибут, без которого изображение не будет отображено. Путь может быть как относительным, так и абсолютным.

Пример:

<img src="images/example.jpg" alt="Пример изображения">

Примечание: При загрузке веб-страницы именно ваш браузер запрашивает картинку с сервера и размещает её на странице. Убедитесь, что картинка расположена корректно относительно содержимого страницы — иначе пользователи будут видеть символ битой ссылки. Этот символ вместе с альтернативным текстом выводится тогда, когда браузер не находит указанное изображение.

Атрибут alt

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

Пример:

<img src="images/example.jpg" alt="Пример изображения">

Совет: Экранный диктор — это программа, которая читает код HTML и позволяет пользователю «прослушивать» содержимое. Экранные дикторы полезны людям с нарушениями зрения взаимобействовать с веб-страницами.

Атрибуты width и height

Атрибуты width и height определяют ширину и высоту изображения в пикселях. Эти атрибуты не обязательны.

Пример:

<img src="images/example.jpg" alt="Пример изображения" width="300" height="200">

Примечание: Всегда указывайте ширину и высоту изображения. Если размер не указан, страница может мерцать во время загрузки изображения.

Атрибут style

Атрибут style позволяет задать стили для изображения, такие как ширина, высота, выравнивание и другие CSS-свойства.

Пример:

<img src="images/example.jpg" alt="Пример изображения" style="width:300px; height:200px;">

Атрибут title

Атрибут title добавляет всплывающую подсказку к изображению. Когда пользователь наводит курсор на изображение, отображается текст, указанный в этом атрибуте.

Пример:

<img src="images/example.jpg" alt="Пример изображения" title="Это пример изображения">

Размер изображения: width/height или style?

Атрибуты width, height и style для изображений равно допустимыми в HTML.

Однако мы рекомендуем использовать атрибут style. Это предотвращает изменение размеров изображений через таблицы стилей:

Пример:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Изображения в другом каталоге

Если ваши изображения находятся в подкаталоге, вы должны указать имя папки в атрибуте src:

Пример:

<img src="/images/html5.gif" alt="Иконка HTML5" style="width:128px;height:128px;">

Изображения на другом сервере/сайте

Некоторые веб-сайты ссылаются на изображение, расположенное на другом сервере.

Чтобы сослаться на изображение, находящееся на другом сервере, нужно указать абсолютный (полный) URL в атрибуте src.

Пример:

<img src="https://www.example.com/images/pic_green.jpg" alt="example.com">

Примечания относительно внешних изображений: Внешние изображения могут находиться под защитой авторских прав. Если вы используете изображение без разрешения владельца, вы можете нарушить авторские права. К тому же внешние изображения неподконтрольны вам — они могут внезапно исчезнуть или поменяться.

Анимированные изображения

HTML позволяет использовать анимированные GIF-изображения:

Пример:

<img src="programming.gif" alt="Человек-компьютер" style="width:48px;height:48px;">

Изображение как ссылка

Чтобы сделать изображение ссылкой, поместите тег <img> внутрь тега <a>:

Пример:

<a href="default.asp">
 <img src="smiley.gif" alt="Учебник HTML" style="width:42px;height:42px;">
</a>

Обтекание изображений

При помощи CSS свойства float можно сделать так, чтобы текст обтекал изображение справа или слева.

Пример:

<p><img src="smiley.gif" alt="Смайлик" style="float:right;width:42px;height:42px;">  
Изображение будет расположено справа от текста.</p>

<p><img src="smiley.gif" alt="Смайлик" style="float:left;width:42px;height:42px;">  
Изображение будет расположено слева от текста.</p>

Заключение

Использование изображений в HTML — это мощный инструмент для улучшения визуального восприятия веб-страниц. Тег <img> с его атрибутами позволяет гибко управлять отображением изображений, обеспечивая доступность и удобство для пользователей. Правильное использование атрибутов src, alt, width, height и style поможет создать качественные и оптимизированные веб-страницы.

Примечание: Загрузка больших изображений занимает время и замедляет веб-страницу. Пользуйтесь изображениями осторожно.