为 HTML 添加图片 – 从基本语法到高级技巧

本文将探讨在 HTML 中添加图像的各种方法，从基本的 <img> 标记到使用 CSS 和 JavaScript 等高级技术。文章还将介绍性能和可访问性方面的最佳实践，并提供 HTML 示例，帮助您轻松地将图像集成到网络项目中。

HTML 中的图像

如果网页只有文字，那就太乏味了。图像和其他类型的媒体在使内容具有视觉吸引力、吸引力和信息量方面发挥着至关重要的作用。因此，在 HTML 中添加图像是网页开发的基本组成部分。

图像格式 选择正确的图像格式会影响加载速度和质量：

JPEG–最适合照片和复杂图像；
PNG – 支持透明度，是图标和徽标的理想选择；
SVG – 适用于网络图形的可缩放矢量格式；
GIF – 支持动画，但仅限于 256 种颜色；
WebP – 现代格式，具有出色的压缩能力和质量。

为优化性能和搜索引擎优化，请压缩图片以减小文件大小，并使用描述性文件名来提高搜索可见性。

注：搜索引擎也会读取图片文件名，并将其作为优化搜索查询的考虑因素。因此，请给图片取一个有意义的名字：landscape.jpg 比 img1.jpg更好。

使用 `<img>` 标记添加图片

在 HTML 页面中添加图片的最简单方法是使用 <img> 标签。该元素不包含结束标记，至少需要使用一个属性–src，其中包含要嵌入页面的图片的路径。不过，为了更好地进行搜索引擎优化，我们建议同时使用其他属性。关键属性包括

src – 指定指向要嵌入页面的图片的 URL。它可以是相对 URL、绝对 URL 或 Base64 编码数据。如果没有 src 属性，<img> 元素将无法加载图像。
alt – 为可访问性和搜索引擎优化提供替代文本。Alt 文本应说明图片的意图、目的和意义。
width 和 height – 以像素为单位指定图像的宽度和高度。如果不指定 width 和 height，网页在加载图像时可能会闪烁。

如果图片名为 landscape.jpg 并与 HTML 页面位于同一目录下，则可以如下所示嵌入图片：

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

注：互联网上的许多图片都有版权。侵犯版权是违法行为。如果您没有创作图片，而是从网上获取的，则应确保图片属于公共领域或您已获得使用许可。

添加不同来源的图片

可以使用本地文件路径、远程 URL 或直接使用 Base64 编码嵌入 HTML 中的图片。

本地图片

使用本地镜像通常比远程镜像更好，因为本地镜像加载速度更快，减少了对外部服务器的依赖，即使互联网连接缓慢或远程服务器不可用，也能确保可用性。本地图像还能防止来自第三方的潜在跟踪或未经授权的更改，从而提高安全性。

如果图片与 HTML 页面位于同一目录下的 images子目录中，则可以像这样嵌入图片：

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，浏览器可以在加载图片前为其分配空间，防止布局突然移动。这种做法不仅能提高视觉稳定性，还能改善核心网页指标，有助于提高搜索引擎优化和网站整体性能。

下图显示了网页的示例：没有为尚未加载的图像预留空间(a)；由于在<img>标记中指定了 height和 width属性，网页上为图像预留了空间(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 编码可将图像作为数据 URI 直接嵌入 HTML，无需单独的图像文件。这样可以减少 HTTP 请求，缩短小图片或图标的加载时间。不过，Base64 编码图像会增加 HTML 文件的大小，从而影响性能。它们最好用于嵌入式图形，如徽标或小型用户界面元素，而不是大型图像。

此代码片段演示了如何在 HTML 中嵌入 Base64 图像：

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

The following HTML code shows how to add an image to an HTML file from three different types of image sources:

 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 编码数据加载的三幅图像。

文本 “使用本地路径、绝对 URL 和 Base64 编码添加到 html 中的三幅图像”。

总结

使用 <img> 标签 – 添加带有 src、alt、width 和 height 属性的图片。所有这些属性对于可访问性和搜索引擎优化都很重要。
选择正确的格式 – 使用 JPEG(照片)、PNG(透明)、SVG(可缩放)、WebP(优化)。与 JPEG 或 PNG 等格式相比，使用 WebP 格式可提供更好的压缩效果和质量。
本地图像与远程图像 – 本地图像加载速度更快，可靠性更高；远程图像则依赖于外部服务器。
优化性能 – 压缩图片，使用描述性文件名，并优先选择本地托管，以提高速度和搜索引擎优化效果。

HTML 背景图片

除了使用<img>标记显示图像外，您还可以使用 CSS 以其他方式处理图像，例如设置背景图片。背景图片主要用于装饰目的，例如添加纹理、渐变或图案，以增强网站的视觉吸引力。要在 HTML 中添加背景图片，可以使用

将所需 HTML 元素的 style 属性与 background-image 属性结合使用；
将包含文档或文档部分背景图像信息的 <style> 元素放入 <head> 元素中。

整个页面的背景图像

如果要为整个网页添加背景图片，可以在 <style> 元素内的 <body> 元素上设置 CSS background-image 属性。默认情况下，如果背景图片小于指定元素(本例中为 <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 展示了如何使用 style 属性和 background-image CSS 属性为 <p> 元素添加背景图片：

示例 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 展示了如何使用文档中 <head> 的 <style> 元素和 background-image CSS 属性为 <div> 元素添加背景图片：

示例 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)。

文本 “两张图片，粉色背景上有和元素的文本，白色雪花”。

总结

1.在网页设计中，如果需要在不影响文档结构的情况下装饰视觉效果，背景图片就非常有用。 2. 使用 CSS 的 background-image 属性可为 <body>、<div> 或 <p>等元素添加图像。这可以在元素的 style 属性、<style> 块或外部 CSS 文件中内嵌完成。 3. 不需要 alt 属性。背景图片是装饰性的，不是内容的一部分，因此不需要alt、width或height属性。无障碍工具不会读取它们。 4. 背景图片会拖慢页面加载速度，尤其是在图片较大或未优化的情况下。为提高性能，请使用 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> 标记不同，这种方法允许在交互式应用程序中进行错误处理、实时更新和更好的可维护性。

使用内联 SVG 绘制矢量图

在 HTML 中使用内嵌 SVG，可以直接在文档中嵌入可缩放的矢量图形，而无需外部图像文件。由于 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 中添加图片？ 一文中，您将学习如何使用 Aspose.HTML for .NET 库在 HTML 中插入图片。
探索 HTML 颜色名称的世界！了解如何在网页设计中使用 HTML 颜色名称，以及何时选择其他颜色名称。
文章 如何更改 HTML 中的文本颜色？ 展示了如何使用 Aspose.HTML for .NET 库来控制 HTML 文档中的文本颜色。
在 如何更改 HTML 中的背景颜色？ 一文中，您将找到 C# 示例，展示设置或更改整个 HTML 文档及其单个元素背景颜色的不同方法。
文章 如何更改 HTML 中的边框颜色？ 讨论了使用 Aspose.HTML for .NET 库设置或更改 HTML 文件中边框颜色的各种方法。

HTML 颜色名称什么是 HTML DOM？