HomeAspose.HTML.NETHTML 教程在 HTML 中添加图像Live DemosHTML .NET SolutionNuGetAPI ReferenceHelpful resources ▼Live DemosHTML .NET SolutionNuGetAPI Reference
Download
Pricing
Buy为 HTML 添加图片 – 从基本语法到高级技巧Contents[
Hide
Show
]HTML 中的图像使用 标记添加图片添加不同来源的图片本地图片远程图像Base64 编码HTML 背景图片整个页面的背景图像HTML 元素的背景图像通过 JavaScript 添加图像使用内联 SVG 绘制矢量图本文将探讨在 HTML 中添加图像的各种方法，从基本的
标记到使用 CSS 和 JavaScript 等高级技术。文章还将介绍性能和可访问性方面的最佳实践，并提供 HTML 示例，帮助您轻松地将图像集成到网络项目中。
HTML 中的图像如果网页只有文字，那就太乏味了。图像和其他类型的媒体在使内容具有视觉吸引力、吸引力和信息量方面发挥着至关重要的作用。因此，在 HTML 中添加图像是网页开发的基本组成部分。
图像格式 选择正确的图像格式会影响加载速度和质量：
JPEG–最适合照片和复杂图像；PNG – 支持透明度，是图标和徽标的理想选择；SVG – 适用于网络图形的可缩放矢量格式；GIF – 支持动画，但仅限于 256 种颜色；WebP – 现代格式，具有出色的压缩能力和质量。为优化性能和搜索引擎优化，请压缩图片以减小文件大小，并使用描述性文件名来提高搜索可见性。
注： 搜索引擎也会读取图片文件名，并将其作为优化搜索查询的考虑因素。因此，请给图片取一个有意义的名字：landscape.jpg 比 img1.jpg更好。
使用 标记添加图片在 HTML 页面中添加图片的最简单方法是使用
标签。该元素不包含结束标记，至少需要使用一个属性–src，其中包含要嵌入页面的图片的路径。不过，为了更好地进行搜索引擎优化，我们建议同时使用其他属性。关键属性包括
src – 指定指向要嵌入页面的图片的 URL。它可以是相对 URL、绝对 URL 或 Base64 编码数据。如果没有 src 属性， 元素将无法加载图像。alt – 为可访问性和搜索引擎优化提供替代文本。Alt 文本应说明图片的意图、目的和意义。width 和 height – 以像素为单位指定图像的宽度和高度。如果不指定 width 和 height，网页在加载图像时可能会闪烁。如果图片名为 landscape.jpg 并与 HTML 页面位于同一目录下，则可以如下所示嵌入图片：
Copy1
注： 互联网上的许多图片都有版权。侵犯版权是违法行为。如果您没有创作图片，而是从网上获取的，则应确保图片属于公共领域或您已获得使用许可。
添加不同来源的图片可以使用本地文件路径、远程 URL 或直接使用 Base64 编码嵌入 HTML 中的图片。
本地图片使用本地镜像通常比远程镜像更好，因为本地镜像加载速度更快，减少了对外部服务器的依赖，即使互联网连接缓慢或远程服务器不可用，也能确保可用性。本地图像还能防止来自第三方的潜在跟踪或未经授权的更改，从而提高安全性。
如果图片与 HTML 页面位于同一目录下的 images子目录中，则可以像这样嵌入图片：
Copy1
2
3
Adding Images Using img Tag
4 
5
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.
6
7图像宽度和高度
加载图片时如果没有指定 width和 height属性，浏览器最初不会为其预留空间，导致图片加载时内容移动。这种现象会对用户体验产生负面影响，使页面看起来不稳定，尤其是在连接速度较慢的情况下。通过指定 width和 height，浏览器可以在加载图片前为其分配空间，防止布局突然移动。这种做法不仅能提高视觉稳定性，还能改善核心网页指标，有助于提高搜索引擎优化和网站整体性能。
下图显示了网页的示例：没有为尚未加载的图像预留空间(a)；由于在标记中指定了 height和 width属性，网页上为图像预留了空间(b)；加载了图像的网页(c)。
注： 网页加载时，浏览器会从网络服务器中检索位于 src 中指定路径的图片，并将其插入页面。如果图片丢失，浏览器会显示一个断开链接图标和 alt 文本。
远程图像绝对文件路径是图像文件的完整路径，从网络服务器根目录或使用完整 URL 开始。例如，您也可以使用绝对 URL 嵌入图片：
Copy1
但不建议使用绝对 URL。在可能的情况下，您应该将要在网站上使用的图片托管到服务器上，在简单的设置中，这意味着将网站的图片与 HTML 存储在同一服务器上。
Base64 编码Base64 编码可将图像作为数据 URI 直接嵌入 HTML，无需单独的图像文件。这样可以减少 HTTP 请求，缩短小图片或图标的加载时间。不过，Base64 编码图像会增加 HTML 文件的大小，从而影响性能。它们最好用于嵌入式图形，如徽标或小型用户界面元素，而不是大型图像。
此代码片段演示了如何在 HTML 中嵌入 Base64 图像：
Copy1
The following HTML code shows how to add an image to an HTML file from three different types of image sources:
Copy 1
2
3
Add Image to HTML
4
5 
6
7
8
9
10
11 
13
14图片说明了上面编写的 HTML 文件。我们看到从本地文件、远程源 URL 以及通过 Base64 编码数据加载的三幅图像。
总结
使用 标签 – 添加带有 src、alt、width 和 height 属性的图片。所有这些属性对于可访问性和搜索引擎优化都很重要。选择正确的格式 – 使用 JPEG(照片)、PNG(透明)、SVG(可缩放)、WebP(优化)。与 JPEG 或 PNG 等格式相比，使用 WebP 格式可提供更好的压缩效果和质量。本地图像与远程图像 – 本地图像加载速度更快，可靠性更高；远程图像则依赖于外部服务器。优化性能 – 压缩图片，使用描述性文件名，并优先选择本地托管，以提高速度和搜索引擎优化效果。HTML 背景图片除了使用
标记显示图像外，您还可以使用 CSS 以其他方式处理图像，例如设置背景图片。背景图片主要用于装饰目的，例如添加纹理、渐变或图案，以增强网站的视觉吸引力。要在 HTML 中添加背景图片，可以使用
将所需 HTML 元素的 style 属性与 background-image 属性结合使用；将包含文档或文档部分背景图像信息的
8
9
10
Background Image for an Entire Page
11
12