HTML 图像

我们如何将图像放到网页上？

为了将图像放到网页上，我们使用 <img> 元素。这是一个 空元素（意味着它不能有任何子内容，也不能有结束标签），它需要两个属性才能有用：src 和 alt。src 属性包含一个指向您要嵌入页面中的图像的 URL。与 <a> 元素的 href 属性一样，src 属性可以是相对 URL 或绝对 URL。如果没有 src 属性，img 元素将无法加载任何图像。

alt 属性在下面描述。

例如，如果您的图像名为 dinosaur.jpg，并且它与您的 HTML 页面位于同一目录中，则可以像这样嵌入图像

<img src="dinosaur.jpg" alt="Dinosaur" />

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

<img src="images/dinosaur.jpg" alt="Dinosaur" />

以此类推。

您还可以使用其绝对 URL 嵌入图像，例如

<img src="https://www.example.com/images/dinosaur.jpg" alt="Dinosaur" />

但是，不建议通过绝对 URL 链接。您应该托管您想在网站上使用的图像，在简单设置中，这意味着将网站的图像保存在与 HTML 相同的服务器上。此外，在维护方面，使用相对 URL 比绝对 URL 更高效（当您将网站移动到不同的域名时，您无需更新所有 URL 以包含新域名）。在更高级的设置中，您可能会使用 CDN（内容分发网络） 来分发您的图像。

如果您没有创建这些图像，您应该确保您有权根据其发布的许可证条件使用它们（有关更多信息，请参阅下面的 媒体资产和许可）。

前面的代码片段，无论是使用绝对 URL 还是相对 URL，都将给出以下结果

替代文本

接下来我们将要看的是 alt 属性。它的值应该是一个图像的文本描述，用于在图像无法看到/显示或由于网络连接缓慢而需要很长时间才能渲染的情况下。例如，我们上面的代码可以这样修改

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth" />

测试 alt 文本最简单的方法是故意拼错文件名。例如，如果我们的图像名称拼写为 dinosooooor.jpg，浏览器将不会显示图像，而是显示 alt 文本

那么，你为什么要看到或需要 alt 文本呢？它可以在许多方面派上用场

• 用户视力受损，正在使用 屏幕阅读器 为他们朗读网页。事实上，为图像提供 alt 文本对大多数用户都很有用。
• 如上所述，文件或路径名的拼写可能错误。
• 浏览器不支持图像类型。有些人仍然使用纯文本浏览器，例如 Lynx，它会显示图像的 alt 文本。
• 您可能希望提供文本供搜索引擎利用；例如，搜索引擎可以将 alt 文本与搜索查询匹配。
• 用户已关闭图像以减少数据传输量和干扰。这在手机上以及带宽有限或昂贵的国家/地区尤其常见。

您应该在 alt 属性中写些什么？这取决于图像最初的目的。换句话说，如果您的图像没有显示，您会失去什么

• 装饰。 您应该为装饰性图像使用 CSS 背景图像，但如果必须使用 HTML，请添加一个空白的 alt=""。如果图像不是内容的一部分，屏幕阅读器不应浪费时间阅读它。
• 内容。 如果您的图像提供了重要信息，请在简短的 alt 文本中提供相同的信息——或者更好的是，在每个人都能看到的主文本中提供。不要编写多余的 alt 文本。如果所有段落都以冗余的方式在主要内容中重复两次，对有视力用户来说会多么烦人？如果图像已由主要文本主体充分描述，则可以直接使用 alt=""。
• 链接。 如果您将图像放在 <a> 标签内，将图像变成链接，您仍然必须提供 可访问的链接文本。在这种情况下，您可以将其写入同一个 <a> 元素内，或者写入图像的 alt 属性内——具体取决于哪种方式最适合您的情况。
• 文本。 您不应将文本放入图像中。例如，如果您的主标题需要阴影，请使用 CSS 而不是将文本放入图像中。但是，如果您实在无法避免这样做，则应在 alt 属性中提供文本。

本质上，关键是提供可用的体验，即使无法看到图像。这确保了所有用户都不会错过任何内容。尝试在浏览器中关闭图像，看看效果如何。如果看不到图像，您很快就会意识到 alt 文本是多么有用。

宽度和高度

您可以使用 width 和 height 属性指定图像的宽度和高度。它们作为不带单位的整数给出，表示图像的像素宽度和高度。

您可以通过多种方式找到图像的宽度和高度。例如，在 Mac 上，您可以使用 Cmd + I 获取图像文件的显示信息。回到我们的示例，我们可以这样做

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341" />

这样做有一个非常好的理由。页面的 HTML 和图像是独立的资源，浏览器会将其作为独立的 HTTP(S) 请求获取。一旦浏览器收到 HTML，它就会开始向用户显示。如果图像尚未收到（通常会发生这种情况，因为图像文件大小通常比 HTML 文件大得多），那么浏览器将只渲染 HTML，并尽快收到图像后更新页面。

例如，假设图像后有一些文本

<h1>Images in HTML</h1>

<img
  src="dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  title="A T-Rex on display in the Manchester University Museum" />
<blockquote>
  <p>
    But down there it would be dark now, and not the lovely lighted aquarium she
    imagined it to be during the daylight hours, eddying with schools of tiny,
    delicate animals floating and dancing slowly to their own serene currents
    and creating the look of a living painting. That was wrong, in any case. The
    ocean was different from an aquarium, which was an artificial environment.
    The ocean was a world. And a world is not art. Dorothy thought about the
    living things that moved in that world: large, ruthless and hungry. Like us
    up here.
  </p>
  <footer>- Rachel Ingalls, <cite>Mrs. Caliban</cite></footer>
</blockquote>

一旦浏览器下载了 HTML，浏览器就会开始显示页面。

图像加载后，浏览器会将图像添加到页面中。因为图像占用了空间，浏览器必须将文本向下移动，以适应其上方的图像

这样移动文本对用户来说极其分散注意力，特别是如果他们已经开始阅读它。

如果您使用 width 和 height 属性在 HTML 中指定图像的实际大小，那么浏览器在下载图像之前就知道它必须为图像留出多少空间。

这意味着当图像下载后，浏览器不必移动周围的内容。

有关此功能历史的优秀文章，请参阅 再次设置图像高度和宽度很重要。

图像标题

与链接一样，您也可以向图像添加 title 属性，以在需要时提供更多支持信息。在我们的示例中，我们可以这样做

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum" />

这会在鼠标悬停时显示一个工具提示，就像链接标题一样

然而，不建议这样做——title 存在一些可访问性问题，主要是因为屏幕阅读器支持非常不可预测，并且大多数浏览器除非您用鼠标悬停，否则不会显示它（例如，键盘用户无法访问）。如果您对更多信息感兴趣，请阅读 Scott O'Hara 的 Title 属性的考验和磨难。

最好将此类支持信息包含在主文章文本中，而不是附加到图像上。

图像嵌入练习

现在轮到你玩了！此任务将让你嵌入图像。

1. 单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。

2. 编辑现有的 <img> 标签，使其嵌入以下 URL 处的图像

   url

   https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg
   

   注意： 前面我们说过，未经许可，切勿热链接到其他服务器上的图像，但此图像位于我们的 GitHub 仓库中，因此没问题。

3. 为图像添加 alt 属性。您可以通过暂时拼错图像 URL 来检查 alt 文本是否有效。

4. 设置图像的正确 width 和 height（提示：它宽 200px，高 171px），然后尝试其他值，看看效果如何。

5. 设置图像的 title。

如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。

<img />

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  width="200"
  height="171"
  title="A T-Rex on display in the Manchester University Museum" />

媒体资产和许可

您在网上找到的图像（以及其他媒体资产类型）以各种许可类型发布。在您构建的网站上使用图像之前，请确保您拥有它、有权使用它或遵守所有者的许可条件。

了解许可类型

让我们看看您在网上可能遇到的一些常见许可类别。

保留所有权利

歌曲、书籍或软件等原创作品的创作者通常在封闭版权保护下发布他们的作品。这意味着，默认情况下，他们（或其出版商）拥有使用（例如，显示或分发）其作品的独家权利。如果您想使用具有保留所有权利许可的受版权保护的图像，您需要执行以下操作之一

• 获得版权所有者的明确书面许可。
• 支付许可费以使用它们。这可能是一次性费用，用于无限使用（“免版税”），或者可能是“权利管理”，在这种情况下，您可能需要按时间段、地理区域、行业或媒体类型等支付每次使用的特定费用。
• 将您的用途限制在您管辖范围内被视为 合理使用 或 合理交易 的范围。

作者无需在其作品中包含版权声明或许可条款。原创文学作品一旦以有形媒介创作，版权就自动存在。因此，如果您在网上找到一张图像，并且没有版权声明或许可条款，最安全的做法是假设它受版权保护并保留所有权利。

宽松许可

如果图像以宽松许可发布，例如 MIT、BSD 或合适的 知识共享 (CC) 许可，您无需支付许可费或寻求许可即可使用它。但是，您仍然需要满足各种许可条件，这些条件因许可而异。

例如，您可能需要

• 提供图像原始来源的链接并注明其创建者。
• 指明是否对其进行了任何更改。
• 根据与原始作品相同的许可分享使用该图像创建的任何衍生作品。
• 完全不分享任何衍生作品。
• 不在任何商业作品中使用该图像。
• 在任何使用该图像的发布中包含许可证的副本。

您应查阅适用的许可证以了解您需要遵守的具体条款。

Copyleft 许可在软件世界中占有突出地位。基本思想是，使用 copyleft 许可项目代码构建的新项目（这被称为原始软件的“分支”）也需要根据相同的 copyleft 许可进行许可。这确保了新项目的源代码也将可供他人研究和修改。请注意，一般来说，为软件起草的许可（例如 GPL）不被认为是适用于非软件作品的良好许可，因为它们在起草时没有考虑非软件作品。

浏览本节前面提供的链接，了解不同的许可类型以及它们指定的条件。

公共领域/CC0

发布到公共领域的作品有时被称为“无权利保留”——它不受版权保护，可以在未经许可和无需满足任何许可条件的情况下使用。作品可以通过多种方式进入公共领域，例如版权到期或明确放弃权利。

将作品置于公共领域最有效的方法之一是根据 CC0 进行许可，这是一种特定的知识共享许可，为此目的提供了清晰明确的法律工具。

在使用公共领域图像时，获取图像处于公共领域的证据，并保存该证据以供记录。例如，截取原始来源的屏幕截图，并清楚显示许可状态，并考虑在您的网站上添加一个页面，列出所获取的图像及其许可要求。

搜索宽松许可的图像

您可以使用图像搜索引擎或直接从图像库中为您的项目找到宽松许可的图像。

使用您正在寻找的图像描述以及相关的许可条款来搜索图像。例如，在搜索“黄色恐龙”时，在搜索查询中添加“公共领域图像”、“公共领域图像库”、“开放许可图像”或类似的术语。

一些搜索引擎提供工具来帮助您查找具有宽松许可的图像。例如，在使用 Google 时，转到“图像”标签搜索图像，然后点击“工具”。在结果工具栏中有一个“使用权限”下拉菜单，您可以在其中选择专门搜索知识共享许可下的图像。

图像库网站，例如 Flickr、ShutterStock 和 Pixabay，都提供搜索选项，允许您仅搜索宽松许可的图像。一些网站专门分发宽松许可的图像和图标，例如 Picryl 和 The Noun Project。

遵守图像发布的许可证是一个查找许可证详细信息、阅读来源提供的许可证或说明页面，然后遵循这些说明的问题。信誉良好的图像库会清楚明了地说明其许可证条件。

使用图表和图表标题注释图像

说到标题，有很多种方法可以为图像添加标题。例如，没有什么能阻止你这样做

<div class="figure">
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <p>A T-Rex on display in the Manchester University Museum.</p>
</div>

这样没问题。它包含您需要的内容，并且可以使用 CSS 很好地进行样式设置。但这里有一个问题：没有什么能够语义化地将图像与其标题关联起来，这可能会给屏幕阅读器带来问题。例如，当您有 50 张图像和标题时，哪个标题与哪个图像匹配？

一个更好的解决方案是使用 HTML <figure> 和 <figcaption> 元素。它们正是为此目的而创建的：为图表提供一个语义容器，并明确将图表与标题关联起来。我们上面的示例可以这样重写

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

<figcaption> 元素告诉浏览器和辅助技术，标题描述了 <figure> 元素的其他内容。

图表不一定是图像。它是一个独立的内容单元，它

• 以简洁易懂的方式表达您的意思。
• 可以出现在页面线性流程中的多个位置。
• 提供支持主文本的基本信息。

图表可以是多张图像、代码片段、音频、视频、方程式、表格或其他内容。

创建图表

在此任务中，我们希望您将上一个任务的完成代码作为起点，并将其转换为图表

1. 单击下面代码块中的**“播放”**以在 MDN Playground 中编辑示例。
2. 将 <img> 元素包裹在 <figure> 元素中。
3. 将 title 属性中的文本复制出来，将其放入 <img> 元素下方的 <figcaption> 元素中，然后删除 title 属性。

如果您犯了错误，可以使用 MDN Playground 中的重置按钮清除您的工作。如果您真的卡住了，可以在代码块下方查看解决方案。

<img
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
  width="200"
  height="171"
  title="A T-Rex on display in the Manchester University Museum" />

<figure>
  <img
    src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
    alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
    width="200"
    height="171" />
  <figcaption>
    A T-Rex on display in the Manchester University Museum
  </figcaption>
</figure>

CSS 背景图像

您还可以使用 CSS 将图像嵌入网页（以及 JavaScript，但那是完全不同的故事）。CSS background-image 属性以及其他 background-* 属性用于控制背景图像的放置。例如，要在页面上的每个段落上放置背景图像，您可以这样做

p {
  background-image: url("images/dinosaur.jpg");
}

由此产生的嵌入图像可以说比 HTML 图像更容易定位和控制。那么为什么要使用 HTML 图像呢？如上所述，CSS 背景图像仅用于装饰。如果您只是想为页面添加一些漂亮的东西以增强视觉效果，那没问题。但是，此类图像完全没有语义意义。它们不能有任何文本等效项，对屏幕阅读器不可见，等等。这正是 HTML 图像的亮点！

总结：如果图像在内容方面具有意义，则应使用 HTML 图像。如果图像纯粹是装饰，则应使用 CSS 背景图像（我们将在核心模块中详细介绍这些）。

总结

暂时就这些了。我们已经详细介绍了图像和标题。

在下一篇文章中，我们将为您提供一些测试，您可以使用它们来检查您对我们提供的 HTML 图像信息的理解和记忆程度。

• 上一页
• 概述：使用 HTML 构造内容
• 下一页