为 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？

Analyzing your prompt, please hold on...

An error occurred while retrieving the results. Please refresh the page and try again.