Изображения HTML
Изображения могут улучшить дизайн и внешний вид веб-страницы.
Дома трулли
Изображение домов трулли.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знакомство: Трулли</title>
</head>
<body>
<img src="pic_trulli.jpg" alt="Итальянские трулли">
</body>
</html>
Девушка в куртке
Изображение с alt-текстом.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знакомство: Девушка</title>
</head>
<body>
<img src="img_girl.jpg" alt="Девушка в куртке">
</body>
</html>
Цветы в Ханье
Ещё одно изображение с alt-текстом.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Знакомство: Ханья</title>
</head>
<body>
<img src="img_chania.jpg" alt="Цветы в Ханье">
</body>
</html>
Синтаксис изображений HTML
Тег <img> размещает изображение на странице. Изображения на самом деле не вставляются в страницу; они на неё ссылаются, а тег <img> создаёт место для связанного изображения. Это пустой тег только с атрибутами, без закрывающего тега.
У него два обязательных атрибута: src — путь к изображению, и alt — альтернативный текст для изображения.
Синтаксис изображения
Форма тега изображения.
<img src="url" alt="alternatetext">
Атрибут src
Обязательный атрибут src задаёт путь (URL) к изображению.
Примечание: При загрузке страницы браузер получает изображение с сервера и вставляет его. Держите изображение в том же месте относительно страницы, иначе посетители увидят значок неработающей ссылки. Значок неработающей ссылки и alt-текст появляются, когда браузер не может найти изображение.
Пример
Изображение, заданное атрибутом src.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Src Chania</title>
</head>
<body>
<img src="img_chania.jpg" alt="Цветы в Ханье">
</body>
</html>
Атрибут alt
Обязательный атрибут alt задаёт альтернативный текст, показываемый, когда изображение не может быть просмотрено — например, при медленном соединении, неверном src или для пользователей программ чтения с экрана. Текст должен описывать изображение.
Совет: Программа чтения с экрана озвучивает HTML вслух, чтобы пользователь мог прослушать содержимое; это помогает людям с нарушениями зрения или трудностями в обучении.
Описательный alt-текст
Изображение с описывающим alt-текстом.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt Chania</title>
</head>
<body>
<img src="img_chania.jpg" alt="Цветы в Ханье">
</body>
</html>
Когда изображение отсутствует
Alt-текст показывается, потому что изображение не найдено.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt для битого изображения</title>
</head>
<body>
<img src="wrongname.gif" alt="Цветы в Ханье">
</body>
</html>
Размер изображения - ширина и высота
Ширину и высоту изображения можно задать с помощью атрибута style или атрибутов width и height. Оба всегда измеряются в пикселях.
Примечание: Всегда задавайте ширину и высоту. Если этого не сделать, страница может мерцать во время загрузки изображения.
С атрибутом style
Изменение размера изображения с помощью CSS в атрибуте style.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Размер через style</title>
</head>
<body>
<img src="img_girl.jpg" alt="Девушка в куртке" style="width:500px;height:600px;">
</body>
</html>
С атрибутами width и height
Изменение размера изображения с помощью атрибутов width и height.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Размер через атрибуты</title>
</head>
<body>
<img src="img_girl.jpg" alt="Девушка в куртке" width="500" height="600">
</body>
</html>
Width и Height, или Style?
Атрибуты width, height и style все допустимы. PromptCookbook рекомендует атрибут style, так как он не даёт таблицам стилей изменять размер изображения.
Пример
Страница, где таблица стилей иначе изменила бы размер изображений.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="Значок HTML5" width="128" height="128">
<img src="html5.gif" alt="Значок HTML5" style="width:128px;height:128px;">
</body>
</html>
Изображения в другой папке
Если ваше изображение находится в подпапке, включите имя папки в атрибут src.
Пример
Изображение, на которое ссылаются из подпапки.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изображение в подпапке</title>
</head>
<body>
<img src="/images/html5.gif" alt="Значок HTML5" style="width:128px;height:128px;">
</body>
</html>
Изображения на другом сервере/сайте
Чтобы использовать изображение с другого сервера, укажите полный (абсолютный) URL в атрибуте src.
Примечание: Внешние изображения могут быть защищены авторским правом, и их использование без разрешения может нарушить закон об авторском праве. Также вы не можете контролировать внешние изображения; они могут измениться или исчезнуть без предупреждения.
Пример
Изображение, загруженное с другого сайта.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Внешнее изображение</title>
</head>
<body>
<img src="https://prompt-cookbook.com" alt="PromptCookbook">
</body>
</html>
Анимированные изображения
HTML может показывать анимированные GIF так же, как и любое другое изображение.
Пример
Анимированный GIF.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анимированный Gif</title>
</head>
<body>
<img src="programming.gif" alt="Компьютерный человечек" style="width:48px;height:48px;">
</body>
</html>
Изображение как ссылка
Чтобы использовать изображение как ссылку, поместите тег <img> внутрь тега <a>.
Пример
Изображение, работающее как ссылка.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Изображение как ссылка</title>
</head>
<body>
<a href="default.asp">
<img src="smiley.gif" alt="Учебник по HTML" style="width:42px;height:42px;">
</a>
</body>
</html>
Обтекание изображением
Используйте CSS-свойство float, чтобы позволить изображению обтекаться справа или слева от окружающего текста.
Пример
Изображения, обтекаемые справа и слева от текста.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обтекание изображением</title>
</head>
<body>
<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>
</body>
</html>
Распространённые форматы изображений
Самые распространённые форматы изображений, поддерживаемые всеми браузерами: APNG (Animated Portable Network Graphics, .apng), GIF (Graphics Interchange Format, .gif), ICO (Microsoft Icon, .ico), JPEG (.jpg, .jpeg), PNG (Portable Network Graphics, .png) и SVG (Scalable Vector Graphics, .svg).
Итоги главы
Подведём итог: используйте элемент <img>, чтобы задать изображение, атрибут src для его URL и атрибут alt для альтернативного текста. Задавайте размер атрибутами width и height или CSS-свойствами width и height, а также используйте CSS-свойство float, чтобы обтекать изображение слева или справа.
Примечание: Большие изображения долго загружаются и могут замедлить страницу, поэтому используйте изображения осторожно.
Теги HTML для изображений
Теги, связанные с изображениями: <img> (определяет изображение), <map> (определяет карту изображения), <area> (определяет кликабельную область внутри карты изображения) и <picture> (определяет контейнер для нескольких ресурсов изображений).