HTML 教程 / 使用 img 插入图片：替代文本与尺寸

HTML

创建时间 2026-11-03 最后修改 2026-11-03

要将图像插入 HTML 文档，请将其文件 URL 放入 img 元素的 src 属性中，并在 alt 中描述其相关内容。将 width 和 height 设置为图像的实际像素尺寸，以便浏览器在文件加载之前可以预留空间。

使用 img 插入图像

元素 img 包含一张图片，并且没有闭合标签。使用湖泊与树木的示例图片测试以下代码。图片文件的路径写法可参阅创建链接：路径、页内跳转与电子邮件中的相对路径示例。

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="一棵树在湖中的一座小岛上，背景是群山"
     width="1600" height="900">

下载示例图片并将其保存到您正在编辑的 HTML 文件旁，例如 index.html。
将上述代码插入到 HTML 文件的 body 部分，并保存文件。
在浏览器中打开或刷新 HTML 文件。您应该能看到下面显示的湖的照片。

src 用于根据 HTML 文件的存储位置识别该文件。上面的代码会在同一文件夹中查找图片。如果您将其保存在子文件夹中 images，请将属性更改为 src="images/html-image-sample-lake-tree-1600-v1.webp"。文件名和扩展名也必须与实际文件相符。

点击此处的图片可以打开原始文件。为图片添加链接是一种不同的功能，与使用 img 插入图片不同。

alt 属性应该写什么？

alt 是一个替代文本。它为无法看到图像或浏览器无法加载图像的读者提供图像在上下文中所传达的信息。请简要描述这一作用，而不是写“图像”或一系列搜索词。如果需要为所有读者提供可见的图片说明，可参阅使用 figure 和 figcaption 关联图片与说明。

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="一棵树在湖中的一座小岛上，背景是群山"
     width="1600" height="900">

如果一张图片纯粹是装饰性的，并且重复了附近的信息，那么一个空的 alt="" 可能是合适的。空值表示它并非必需；省略 alt 属性不能传达这一意图。如果图片传达了重要信息，请在替代文本或相邻文本中说明。W3C WAI 关于替代文本的决策树在有疑问的情况下提供帮助。

宽度和高度有什么作用？

示例文件的分辨率为1600×900像素。它的值width="1600"和height="900"帮助浏览器提前计算纵横比。这些属性既不会减少文件的字节大小，也不会减少像素数量。学习响应式图片时，请分别比较 srcset、sizes 的文件选择与 picture 的构图裁剪变化。

如果图像比内容区域宽，CSS 可以限制其显示宽度，同时保持纵横比。

img {
  max-width: 100%;
  height: auto;
}

在独立的 HTML 文件中，请将这段 CSS 放入 head 中的 style 元素，或写入已链接的样式表。图像尺寸表示文件的比例；CSS 控制当前显示的大小。

要发送较小的文件，您需要一个单独缩小的图像。响应式图像教程解释了 srcset 和 sizes 如何让浏览器从图像文件中进行选择。

如果图像未显示

在 src 中检查确切的文件名和扩展名。
检查图像文件夹与 HTML 文件的相对位置。
直接在浏览器中打开图像的 URL，以查看文件是否可用。
不要认为显示尺寸较小意味着下载的文件也较小。

MDN 的 img 元素参考文档介绍了可用属性及其行为。

HTML