HTML 中的图像

最初,Web 只是文本,非常无聊。幸运的是,不久之后,在网页中嵌入图像(和其他更有趣的内容类型)的功能就增加了。从简单的 <img> 元素开始是合乎逻辑的,该元素用于在网页中嵌入简单的图像,但还有其他类型的多媒体需要考虑。在本文中,我们将深入探讨如何使用它,包括基础知识、使用 <figure> 为图像添加标题以及它与 CSS 背景图像的关系,并将介绍其他可用于 Web 平台的图形。

多媒体和嵌入图像
先决条件 安装了基本软件,了解 文件处理 基础知识,熟悉 HTML 基础知识(如 HTML 入门 中所述)。
目标 学习如何在 HTML 中嵌入简单的图像,使用标题为它们添加注释,以及 HTML 图像与 CSS 背景图像的关系。

如何将图像放到网页上?

为了将简单的图像放到网页上,我们使用 <img> 元素。这是一个 空元素(意味着它不能有任何子内容,也不能有结束标签),它需要两个属性才能发挥作用:srcaltsrc 属性包含指向要嵌入页面的图像的 URL。与 <a> 元素的 href 属性一样,src 属性可以是相对 URL 或绝对 URL。如果没有 src 属性,img 元素就没有图像可以加载。

alt 属性将在下面介绍

注意:在继续之前,您应该阅读 有关 URL 和路径的快速入门,以复习一下相对 URL 和绝对 URL。

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

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

如果图像位于 images 子目录中,该子目录与 HTML 页面位于同一个目录中,那么您应该这样嵌入图像

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

依此类推。

注意:搜索引擎也会读取图像文件名并将它们计入 SEO。因此,您应该为图像提供描述性的文件名;dinosaur.jpgimg835.png 更好。

您也可以使用图像的绝对 URL 来嵌入图像,例如

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

但是,不建议通过绝对 URL 链接。您应该在您的网站上托管您想要使用的图像,在简单的设置中,这意味着将网站的图像与 HTML 保存在同一个服务器上。此外,就维护而言,使用相对 URL 比使用绝对 URL 更有效率(当您将网站移动到不同的域时,您无需更新所有 URL 以包含新域)。在更高级的设置中,您可能会使用 CDN(内容交付网络) 来交付图像。

如果您没有创建这些图像,您应该确保您有权在它们发布的许可证条款下使用它们(有关更多信息,请参见下面的 媒体资产和许可)。

警告:切勿src 属性指向未经许可托管在其他人网站上的图像。这被称为“热链接”。这被认为是不道德的,因为当有人访问您的页面时,其他人将支付传递图像的带宽费用。它还让您无法控制图像被删除或替换为令人尴尬的内容。

前面的代码片段,无论是使用绝对 URL 还是相对 URL,都会产生以下结果

A basic image of a dinosaur, embedded in a browser, with "Images in HTML" written above it

注意: 诸如 <img><video> 之类的元素有时被称为 **替换元素**。 这是因为元素的内容和大小由外部资源(如图像或视频文件)定义,而不是由元素本身的内容定义。 您可以在 替换元素 中了解更多关于它们的信息。

注意: 您可以在 GitHub 上运行(也请查看 源代码)找到本节的完整示例。

替代文本

我们将要研究的下一个属性是 alt。 它的值应该是图像的文本描述,用于在无法看到/显示图像或由于互联网连接缓慢而渲染时间过长的情况下使用。 例如,我们上面的代码可以修改如下

html
<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 文本

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

那么,为什么您会看到或需要 alt 文本呢? 它在很多情况下都非常有用

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

您应该在 alt 属性中写什么? 这取决于图像在那里存在的 *原因*。 换句话说,如果图像没有显示,您会失去什么

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

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

注意: 有关更多信息,请参阅我们的 文本替代 指南。

宽度和高度

您可以使用 widthheight 属性来指定图像的宽度和高度。 它们以整数形式给出,不带单位,以像素表示图像的宽度和高度。

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

html
<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,并在收到图像后立即更新页面。

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

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 后,就会开始显示页面。

图像加载完毕后,浏览器会将图像添加到页面。 由于图像占用了空间,浏览器必须将文本向下移动到页面,以适应其上方的图像

Comparison of page layout while the browser is loading a page and when it has finished, when no size is specified for the image.

这种移动文本的方式会极大地分散用户的注意力,尤其是在他们已经开始阅读的时候。

如果您使用 widthheight 属性在 HTML 中指定图像的实际大小,那么浏览器在下载图像之前就知道要为其分配多少空间。

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

Comparison of page layout while the browser is loading a page and when it has finished, when the image size is specified.

有关此功能历史的精彩文章,请参阅 再次强调在图像上设置高度和宽度

注意: 虽然我们已经说过,使用 HTML 属性指定图像的 *实际* 大小是一种良好的做法,但您不应该使用它们来 *调整* 图像大小。

如果将图像大小设置得太大,最终会导致图像出现颗粒状、模糊或太小,并且会浪费带宽来下载不符合用户需求的图像。 此外,如果未保持正确的 纵横比,图像最终可能会出现失真。 您应该使用图像编辑器将图像调整到正确的大小,然后再将其放在网页上。

如果确实需要更改图像的大小,您应该使用 CSS

图像标题

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

html
<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" />

这将在鼠标悬停时显示工具提示,就像链接标题一样

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

但是,不建议这样做——title 存在一些可访问性问题,主要是因为屏幕阅读器支持非常不可预测,而且大多数浏览器在您使用鼠标悬停时才会显示它(例如,键盘用户无法访问)。 如果您想了解更多信息,请阅读 Scott O'Hara 编写的 Title 属性的磨难

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

主动学习:嵌入图像

现在轮到您玩了! 本主动学习部分将让您完成一个简单的嵌入练习。 我们为您提供了一个基本的 <img> 标签; 我们希望您嵌入位于以下 URL 的图像

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

我们之前说过,永远不要在其他服务器上热链接图像,但这仅仅是为了学习目的,所以这次我们允许您这样做。

我们还希望您

  • 添加一些 alt 文本,并通过拼错图像 URL 来检查它是否有效。
  • 设置图像的正确 widthheight(提示:宽度为 200 像素,高度为 171 像素),然后尝试其他值,看看效果如何。
  • 在图像上设置一个 title

如果您犯了错误,可以使用“重置”按钮将其重置。 如果您真的卡住了,请按“显示解决方案”按钮以查看答案

媒体资产和许可

您在网上找到的图像(和其他媒体资产类型)是在各种许可类型下发布的。 在您将图像用于正在构建的网站之前,请确保您拥有它,有权使用它,或者符合所有者的许可条件。

了解许可类型

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

所有权利保留

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

  • 获得版权持有人的明确书面许可。
  • 支付使用费才能使用它们。 这可能是无限期使用的单次费用(“免版税”),或者可能是“权利管理”的,在这种情况下,您可能需要按时间段、地理区域、行业或媒体类型等支付特定的使用费。
  • 将您的使用限制在您所在司法管辖区内被认为是 合理使用合理使用 的范围内。

作者不需要在他们的作品中包含版权声明或许可条款。 版权在原创作品被创作在有形媒介中时自动存在。 因此,如果您在网上找到一张图像,并且没有版权声明或许可条款,最安全的做法是假设它受版权保护,并保留所有权利。

宽松许可

如果图像是在宽松许可下发布的,例如 MITBSD 或合适的 Creative Commons (CC) 许可,您无需支付许可费或寻求许可来使用它。 尽管如此,您仍然需要满足各种许可条件,这些条件因许可而异。

例如,您可能需要

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

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

注意: 您可能会在宽松许可的上下文中遇到“复制左”一词。 复制左许可证(例如 GNU 通用公共许可证 (GPL) 或“署名-相同方式共享”Creative Commons 许可证)规定,衍生作品需要在与原始作品相同的许可下发布。

复制左许可证在软件世界中很突出。 基本思想是,使用复制左许可的项目的代码构建的新项目(这被称为原始软件的“分叉”)也需要在相同的复制左许可下授权。 这确保了新项目的源代码也将可供其他人学习和修改。 请注意,总的来说,为软件制定的许可证(如 GPL)不被认为是针对非软件作品的良好许可证,因为它们并非针对非软件作品而制定。

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

公有领域/CC0

发布到公有领域的作品有时被称为“没有保留权利”——版权不适用于它,并且可以在没有许可的情况下使用,也不需要满足任何许可条件。 作品可以通过各种方式进入公有领域,例如版权到期或特定权利的放弃。

将作品置于公有领域的最有效方法之一是根据 CC0 授权它,CC0 是一种特定的创作共用许可证,它为此目的提供了一种清晰明确的法律工具。

当使用公有领域图像时,请获取证明该图像属于公有领域的证据,并将证据保存到您的记录中。 例如,截取显示许可状态的原始来源的屏幕截图,并考虑在您的网站上添加一个页面,列出获取的图像及其许可要求。

搜索宽松许可的图像

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

使用您要搜索的图像的描述以及相关的许可条款搜索图像。 例如,当搜索“黄色恐龙”时,在搜索查询中添加“公有领域图像”、“公有领域图像库”、“开放许可的图像”或类似的词语。

一些搜索引擎提供工具来帮助您找到具有宽松许可的图像。 例如,在使用 Google 时,转到“图片”选项卡以搜索图片,然后单击“工具”。 在生成的工具栏中有一个“使用权限”下拉菜单,您可以在其中选择专门搜索具有创作共用许可证的图片。

图像存储库网站(如 FlickrShutterStockPixabay)具有搜索选项,允许您仅搜索宽松许可的图像。 一些网站专门分发宽松许可的图像和图标,例如 PicrylThe Noun Project

遵守图像发布的许可证是查找许可证详细信息、阅读来源提供的许可证或说明页面,然后遵循这些说明的问题。 声誉良好的图像存储库会使其许可条件清晰易懂。

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

说到标题,您可以通过多种方式添加标题来配合您的图像。 例如,没有什么可以阻止您这样做

html
<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> 元素。它们正是为了这个目的而创建的:为图形提供语义容器,并清楚地将图形与标题关联起来。我们上面的例子可以改写成这样

html
<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> 元素中的其他内容。

注意: 从可访问性的角度来看,标题和 alt 文本具有不同的作用。标题即使对可以看到图像的人也有益,而 alt 文本则提供了与缺失图像相同的功能。因此,标题和 alt 文本不应该仅仅说相同的内容,因为它们都在图像消失时出现。尝试在浏览器中关闭图像并查看效果。

图形不必是图像。它是一个独立的内容单元,

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

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

主动学习:创建图形

在本节主动学习中,我们希望您从之前的主动学习部分获取完成的代码,并将其转换为图形。

  1. 将其包装在 <figure> 元素中。
  2. 将文本从 title 属性中复制出来,删除 title 属性,并将文本放在图像下方 <figcaption> 元素中。

如果您犯了错误,可以使用“重置”按钮将其重置。 如果您真的卡住了,请按“显示解决方案”按钮以查看答案

CSS 背景图像

您还可以使用 CSS 将图像嵌入网页(以及 JavaScript,但那是另一个故事)。CSS 的 background-image 属性和其他 background-* 属性用于控制背景图像的位置。例如,要将背景图像放置在页面上的每个段落上,您可以这样做

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

嵌入的图像定位和控制可能比 HTML 图像更容易。那么为什么要费心使用 HTML 图像呢?正如上面所暗示的那样,CSS 背景图像仅用于装饰。如果您只是想在页面中添加一些漂亮的东西来增强视觉效果,那么这很好。但是,此类图像没有任何语义意义。它们不能有任何文本等效项,对屏幕阅读器不可见,等等。这就是 HTML 图像的优势所在!

总结:如果图像在内容方面具有意义,则应使用 HTML 图像。如果图像纯粹是装饰性的,则应使用 CSS 背景图像。

注意: 您将在我们的 CSS 主题中了解更多有关 CSS 背景图像 的信息。

Web 上的其他图形

我们已经看到可以使用 <img> 元素或通过使用 background-image 属性设置 HTML 元素的背景来显示静态图像。您还可以动态地构建图形,或在事后操作图像。浏览器提供使用代码创建 2D 和 3D 图形的方法,以及从上传的文件或用户摄像头实时流式传输的视频。以下是提供有关这些更高级图形主题见解的文章的链接

画布

<canvas> 元素提供 API 以使用 JavaScript 绘制 2D 图形。

SVG

可缩放矢量图形 (SVG) 使您可以使用线、曲线和其他几何形状来呈现 2D 图形。使用矢量,您可以创建可以干净地缩放至任何尺寸的图像。

WebGL

WebGL API 指南将帮助您开始使用 WebGL,它是 Web 的 3D 图形 API,允许您在 Web 内容中使用标准 OpenGL ES。

使用 HTML 音频和视频

就像 <img> 一样,您可以使用 HTML 将 <video><audio> 嵌入网页并控制其播放。

WebRTC

WebRTC 中的 RTC 代表实时通信,这是一种允许浏览器客户端(对等方)之间进行音频/视频流式传输和数据共享的技术。

测试您的技能!

您已经阅读完这篇文章,但您还记得最重要的信息吗?在继续之前,您可以找到一些进一步的测试来验证您是否保留了这些信息 - 请查看 测试您的技能:HTML 图像

总结

到此为止。我们已经详细介绍了图像和标题。在下一篇文章中,我们将更进一步,看看如何使用 HTML 将 视频和音频内容 嵌入网页。