Добавить изображение в HTML – от базового синтаксиса до продвинутых техник

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

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

Если бы веб-страницы состояли только из текста, они были бы довольно скучными. Изображения и другие типы медиа играют важнейшую роль в том, чтобы сделать контент визуально привлекательным, интересным и информативным. Поэтому добавление изображений в HTML является основополагающей частью веб-разработки.

Форматы изображений. Выбор правильного формата изображения влияет на скорость и качество загрузки:

JPEG – лучше всего подходит для фотографий и сложных изображений;
PNG – поддерживает прозрачность, идеально подходит для иконок и логотипов;
SVG – масштабируемый векторный формат, отлично подходит для веб-графики;
GIF – поддерживает анимацию, но ограничен 256 цветами;
WebP – современный формат с превосходным сжатием и качеством.

Для оптимальной производительности и SEO сжимайте изображения для уменьшения размера файлов и используйте описательные имена файлов для улучшения видимости в поиске.

Примечание: Поисковые системы также читают имена файлов изображений и учитывают их при оптимизации поисковых запросов. Поэтому давайте изображениям осмысленные имена: landscape.jpg лучше, чем img1.jpg.

Добавление изображений с помощью тега `<img>`

Самый простой способ добавить изображение на HTML-страницу – это использовать тег <img>. Этот элемент не содержит закрывающего тега и требует использования как минимум одного атрибута – src, который содержит путь к изображению, которое вы хотите вставить на страницу. Однако для улучшения SEO мы рекомендуем использовать и другие атрибуты. К ключевым атрибутам относятся:

src – указывает URL, указывающий на изображение, которое вы хотите вставить на страницу. Это может быть относительный URL, абсолютный URL или данные в Base64-кодировке. Без атрибута src элемент <img> не имеет изображения для загрузки.
alt – предоставляет альтернативный текст для доступности и SEO. Alt-текст должен раскрывать замысел, цель и значение изображения.
width и height – указывают ширину и высоту изображения в пикселях. Если width и height не указаны, веб-страница может мерцать во время загрузки изображения.

Если ваше изображение называется landscape.jpg и находится в той же директории, что и HTML-страница, вы можете вставить его, как показано ниже:

1<img src="landscape.jpg" alt="Summer landscape – a field with windmills." width="400" height="150">

Примечание: Многие изображения в Интернете защищены авторским правом. Нарушение авторских прав является незаконным. Если вы не создавали изображение, а взяли его из Интернета, убедитесь, что оно является общественным достоянием или у вас есть разрешение на его использование.

Добавление изображений из разных источников

Изображения в HTML можно добавлять с помощью локальных путей к файлам, удаленных URL-адресов или встраивать напрямую с кодировкой Base64.

Локальные изображения

Использование локальных изображений зачастую лучше, чем удаленных, поскольку они загружаются быстрее, снижают зависимость от внешних серверов и обеспечивают доступность даже при медленном интернет-соединении или недоступности удаленного сервера. Локальные образы также повышают безопасность, предотвращая возможное отслеживание или несанкционированные изменения из сторонних источников.

Если изображение находится в подкаталоге images в том же каталоге, что и HTML-страница, вы можете вставить его следующим образом:

1<html>
2	<body>
3		<h1>Adding Images Using img Tag</h1>
4		<img src="images/landscape.png" alt="Summer landscape – a field with windmills." width="400" height="150" >
5		<p>When an image is loaded without specified width and height attributes, the browser initially doesn’t reserve space for it, causing content to shift as the image loads.</p>
6	</body>
7</html>

Ширина и высота изображения

Когда изображение загружается без указания атрибутов width и height, браузер изначально не резервирует для него место, в результате чего содержимое страницы смещается по мере загрузки изображения. Это явление негативно сказывается на пользовательском восприятии, из-за чего страница выглядит нестабильной, особенно на медленных соединениях. Указывая width и height, браузер может выделить место для изображения до его загрузки, предотвращая внезапное смещение макета. Такая практика не только повышает визуальную стабильность, но и улучшает основные веб-метрические показатели, помогая улучшить SEO и общую производительность сайта.

На рисунке ниже показаны примеры веб-страниц: без зарезервированного места для изображения, которое еще не загрузилось (a); на веб-странице зарезервировано место для изображения, поскольку атрибуты height и width были указаны в теге <img> (b); веб-страница с загруженным изображением (c).

Текст “Рисунок иллюстрирует поведение браузера (смещение макета) после загрузки изображения.”

Примечание: Когда веб-страница загружается, браузер получает изображение с веб-сервера по пути, указанному в src, и вставляет его на страницу. Если изображение отсутствует, браузер показывает значок неработающей ссылки и текст alt.

Удаленные изображения

Абсолютный путь к файлу – это полный путь к файлу изображения, начиная с корня веб-сервера или используя полный URL. Вы также можете вставить изображение, используя его абсолютный URL-адрес, например:

1<img src="https://docs.aspose.com/svg/images/api/lioness.jpg" alt="The muzzle of a lioness close-up." width="350" height="200" >

Однако использование абсолютных URL не рекомендуется. По возможности следует размещать изображения, которые вы хотите использовать на своем сайте, что в простых ситуациях означает хранение изображений на том же сервере, что и HTML.

Кодировка Base64

Кодировка Base64 позволяет встраивать изображения непосредственно в HTML в виде URI данных, исключая необходимость в отдельных файлах изображений. Это сокращает количество HTTP-запросов, улучшая время загрузки небольших изображений или иконок. Однако изображения в кодировке Base64 увеличивают размер HTML-файла, что может повлиять на производительность. Их лучше использовать для встроенной графики, например логотипов или небольших элементов пользовательского интерфейса, а не для больших изображений.

Этот фрагмент кода демонстрирует, как можно встраивать Base64-изображения в HTML:

1<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ..." alt="Red circle" width="300" height="200" >

Следующий HTML-код показывает, как добавить изображение в HTML-файл из трех различных типов источников изображений:

 1<html>
 2    <body>
 3		<h1>Add Image to HTML</h1>
 4		<!-- Adding image to HTML using local path -->
 5		<img src="images/georgia-castle.png" alt="Ananuri fortress complex in Georgia" width="350" height="200" >
 6
 7		<!-- Adding image to HTML using absolute URL -->
 8		<img src="https://docs.aspose.com/svg/images/api/lioness.jpg" alt="The muzzle of a lioness close-up." width="350" height="200" >
 9
10		<!-- Adding image to HTML using Base64 encoded data -->
11		<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8Y2lyY2xlIGN4PSIxNTAiIGN5PSIxMDAiIHI9I
12		jgwIiBzdHlsZT0iZmlsbDpyZWQ7IHN0cm9rZS13aWR0aDo1OyBzdHJva2U6dGVhbCIgLz4NCjwvc3ZnPg==" alt="Red circle" width="300" height="200" >
13	</body>
14</html>

Изображение иллюстрирует HTML-файл, написанный выше. Мы видим три изображения, загруженные из локального файла, удаленного URL-адреса источника и через Base64-кодированные данные.

Текст “Три изображения, добавленные в html с использованием локального пути, абсолютного URL и кодировки Base64.”

Подведем итог

Используйте тег <img> – добавляйте изображения с атрибутами src, alt, width и height. Все эти атрибуты важны для доступности и SEO.
Выберите правильный формат – Используйте JPEG (фотографии), PNG (прозрачность), SVG (масштабируемость), WebP (оптимизация). Использование формата WebP обеспечивает лучшее сжатие и качество по сравнению с такими форматами, как JPEG или PNG.
Локальные и удаленные изображения – локальные изображения загружаются быстрее и более надежны; удаленные изображения зависят от внешних серверов.
Оптимизация для производительности – сжимайте изображения, используйте описательные имена файлов и предпочитайте локальный хостинг для повышения скорости и SEO.

Фоновые изображения HTML

Помимо отображения изображений с помощью тега <img>, вы можете использовать CSS для других манипуляций с изображениями, например, для установки фонового изображения. Фоновые изображения используются в основном в декоративных целях, например, для добавления текстур, градиентов или узоров, чтобы повысить визуальную привлекательность сайта. Чтобы добавить фоновое изображение в HTML, вы можете использовать:

атрибут style для нужного HTML-элемента со свойством background-image;
элемент <style> с информацией о фоновом изображении для документа или части документа в элементе <head>.

Фоновое изображение для всей страницы

Если вы хотите добавить фоновое изображение на всю веб-страницу, вы можете установить свойство CSS background-image для элемента <body> в элементе <style>. По умолчанию фоновое изображение будет повторяться, если оно меньше указанного элемента, в данном случае элемента <body>:

 1<html>
 2	<head>
 3		<style>
 4			body {
 5				background-image: url("lioness.png");
 6			}
 7		</style>
 8	</head>
 9	<body>
10		<h1>Background Image for an Entire Page</h1>
11	</body>
12</html>

Если вы хотите, чтобы фоновое изображение занимало весь элемент, вы можете установить для свойства background-size значение cover:

1body {
2  background-image: url("lioness.png");
3  background-size: cover;
4}

Чтобы фоновое изображение не повторялось, установите для свойства background-repeat значение no-repeat:

1body {
2  background-image: url("lioness.png");
3  background-repeat: no-repeat;
4}

На следующем рисунке показаны три экрана компьютера (уменьшенные) с фоновыми изображениями, которые были добавлены с помощью свойств background-image с настройками по умолчанию (a), background-size: cover (b) и background-repeat: no-repeat (c):

Текст “Три экрана компьютера с повторяющимися фоновыми изображениями (a) с одним изображением на весь экран (b) и изображением собственного размера.”

Примечание: Фоновые изображения являются чисто декоративными и не требуют таких атрибутов, как alt, width или height, поскольку они не являются частью фактического содержимого страницы. В отличие от изображений, вставленных с помощью тега <img>, фоновые изображения не несут значимой информации для пользователей и не считываются программами чтения с экрана, что делает атрибут alt ненужным для обеспечения доступности. Кроме того, их размеры контролируются с помощью CSS, поэтому нет необходимости явно определять width или height.

Фоновое изображение для элемента HTML

Фоновое изображение для HTML-элемента задается с помощью свойства CSS background-image, что позволяет применять его к таким элементам, как p, div, body или section. Вы можете управлять позиционированием фонового изображения с помощью background-position, регулировать масштаб с помощью background-size и улучшать отзывчивость с помощью background-repeat.

В следующем примере 1 показано, как добавить фоновое изображение в элемент <p> с помощью атрибута style и CSS-свойства background-image:

Пример 1

1<p style="background-image: url('winter.png'); "> A background image for an HTML element is set using CSS with the background-image property...</p>

В следующем примере 2 показано, как добавить фоновое изображение к элементу <div> с помощью элемента <style> в <head> документа и CSS-свойства background-image:

Пример 2

 1<html>
 2	<head>
 3		<style>
 4			div {
 5				background-image: url("winter.png");
 6			}
 7		</style>
 8	</head>
 9    <body>
10		<h1>HTML Background Images</h1>
11		<div>
12			<h2>Background Image for an HTML Element</h2>
13			<p> A background image for an HTML element is set using CSS with the background-image property, allowing you to apply images to elements like div, body, or section... </p>
14			<br>
15		</div>
16	</body>
17</html>

На следующем рисунке показан результат рендеринга примеров 1 и 2: фоновое изображение добавлено с помощью атрибута style к элементу <p> (a); фоновое изображение добавлено с помощью элемента <style> и применено к элементу <div> (b).

Текст “Два изображения с текстом элементов и на розовом фоне с белыми снежинками.”

Подведем итог

Фоновые изображения полезны в веб-дизайне, когда требуется декоративное оформление, не влияющее на структуру документа.
Используйте свойство CSS background-image для добавления изображений в такие элементы, как <body>, <div> или <p>. Это можно сделать в атрибуте style элемента, в блоке <style> или во внешнем CSS-файле.
Атрибут alt не нужен. Фоновые изображения являются декоративными, а не частью контента, поэтому для них не требуются атрибуты alt, width или height. Инструменты доступности их не читают.
Фоновые изображения могут замедлять загрузку страницы, особенно если они большие или неоптимизированные. Чтобы повысить производительность, используйте современные форматы изображений, например WebP, для лучшего сжатия.

Добавление изображений с помощью JavaScript

Хотя использование тега <img> проще для статического контента, JavaScript – лучший выбор, когда изображения нужно добавлять или изменять динамически.

 1<html>
 2	<body>
 3		<h1>Adding Image via JavaScript</h1>
 4		<script>
 5			// Create a new image element
 6			let img = document.createElement("img");
 7
 8			// Set the image source
 9			img.src = "https://docs.aspose.com/svg/images/api/lioness.jpg";
10
11			// Set alternative text, width and height for accessibility and SEO
12			img.alt = "The muzzle of a lioness close-up. The lioness looks away.";
13			img.width = 350;
14			img.height = 200;
15
16			// Append the image to the body
17			document.body.appendChild(img);
18		</script>
19	</body>
20</html>

Хотя использование тега <img> проще для статического контента, JavaScript – лучший выбор, когда изображения нужно добавлять или изменять динамически. Добавление изображений с помощью JavaScript позволяет выполнять условную и “ленивую” загрузку, что повышает производительность и гибкость. В отличие от статичных тегов <img>, этот подход позволяет обрабатывать ошибки, обновлять изображения в режиме реального времени и улучшать удобство обслуживания интерактивных приложений.

Использование Inline SVG для векторной графики

Использование встроенного SVG в HTML позволяет встраивать масштабируемую векторную графику непосредственно в документ без необходимости использования внешних файлов изображений. Поскольку SVG не зависят от разрешения, они остаются четкими на экранах любого размера, что делает их идеальными для иконок, логотипов и сложной графики.

 1<html>
 2	<head>
 3		<style>
 4			.page {
 5				width: 160mm;
 6				height: 90mm;
 7				border: 2px solid #026dc5;
 8				text-align: center;
 9			}
10			h1,p {
11				color: #054c87;
12			}
13		</style>
14	</head>
15	<body>
16		<div class="page">
17			<h1>Using Inline SVG as image in HTML</h1>
18			<p>Because SVGs are resolution-independent, they remain crisp on screens of all sizes, making them ideal for icons, logos, and complex graphics...</p>
19			<svg height="140" width="140" viewBox="-40 0 140 140" xmlns="http://www.w3.org/2000/svg">
20				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78" fill="#3993c9"/>
21				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#f3622a" transform= "rotate(90 30 64) translate(5 -14)"/>
22				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#c1af2c" transform= "rotate(180 25 78) translate(-19 9)"/>
23				<path d="M 25 78  C -26 28  97 -15  98 91 C 86 34 16 33 25 78"  fill="#499c43" transform= "rotate(-90 25 78) translate(-5 14)"/>
24				<circle cx="34.5" cy="73.5" r="40"   fill="white" fill-opacity="0.3" />
25			</svg>
26		</div >
27	</body>
28</html>

На следующем рисунке показан HTML-файл, описанный выше. В файле используется встроенный SVG, который представляет собой логотип компании Aspose:

Текст “Текст из элементов h1 и p и логотип Aspose под текстом.”

Смотрите также

В статье Как добавить изображение в HTML? вы узнаете, как вставить изображение в HTML с помощью библиотеки Aspose.HTML for .NET.
Откройте для себя мир названий цветов HTML! Узнайте об использовании HTML color names в веб-дизайне и о том, когда лучше выбрать альтернативу.
В статье Как изменить цвет текста в HTML? показано, как использовать библиотеку Aspose.HTML for .NET для управления цветом текста в HTML-документе.
В статье Как изменить цвет фона в HTML? вы найдете примеры C#, демонстрирующие различные способы установки или изменения цвета фона как для всего HTML-документа, так и для его отдельных элементов.
В статье Как изменить цвет границы в HTML? рассматриваются различные способы установки или изменения цвета границы в HTML-файлах с помощью библиотеки Aspose.HTML for .NET.

Имена HTML цветов Работа с цветом HTML