在一开始时,Web仅有文本,那真的是很无趣。幸运的是,没过多久,能够嵌入图片(以及其他更有趣的类型)的网页代替了这种纯文本网页,还有其他类型的多媒体要考虑,但是从humble<img>元素开始是符合逻辑的,它常常被用来在网页中嵌入一个普通的图片。在这篇文章中,我们要看看怎样更深入的使用它,包括基础,用标题注解<figure>,以及怎样把它和CSS背景图片链接起来。

学习本节的前提条件: 已阅读 basic software installed 掌握基本电脑知识, 已阅读 working with files 掌握处理文件的基本方法, 通过阅读 Getting started with HTML. 掌握基本的 HTML 知识。
本节目的: 学习如何在 HTML 页面插入简单的图片, 为图片添加简单的说明, 以及 CSS 背景图片与 HTML 图片的关系。

怎样将一幅图片放到网页上?

为了将一幅简单的图片展示到网页上我们通常会使用 <img> 元素。它是一个空元素(不需要包含内容也不需要闭合标签)最少只需要一个src (pronounced sarc, sometimes spoken as its full title, source)来使其生效。src 属性包含了指向我们想要引入的图片的路径,可以是相对路径或绝对路径,就像 <a> 元素中的 href 属性一样 (你可以阅读 A quick primer on URLs and paths 来唤醒一下你的记忆.)

举个例子来看,如果你有一幅文件名为 dinosaur.jpg 的图片并且存放在和你的 HTML  页面相同路径下,那么你可以像下面这样来将图片放到页面上展示:

<img src="dinosaur.jpg">

如果这张图片存储在和 HTML 页面同路径 image 文件夹的子路径下 (which is what Google recommends for SEO/indexing purposes), 那么你可以采用如下形式:

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

以此类推。

Note: 搜索引擎也读取图像的文件名并且通过SEO计算——因此你应该给你的图片一个描述性的文件名(dinosaur.jpg 比 img835.png.要好)

当然你也可以像下面这样使用完整的绝对路径:

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

但是这种方式是不被推荐的,这样做只会使浏览器做更多的工作,例如重新通过 DNS 再去寻找 IP 地址。但是人们基本上总是把图片和 HTML 放在同一个存放网站的服务器上。

警告:大多数图片是有版权的。不要在你的网站页面上使用这样的图片,除非(1)你是图片的拥有者(2)你有明确的图片拥有者的许可(3)你有充分的证据证明这张图片是公共领域内的。侵犯版权是违法并且不道德的。

此外,永远不要把你的src属性指向其他你没有获得许可能够链接的图片。这被称之为"hotlinking(盗链)",一再地、盗取其他人的带宽(bandwidth)是违法错误的。(这会降低你的页面的加载速度,而且你无法控制可能出现的一种尴尬——图片被移除或者被替换)

我们上面的代码会展示如下的结果页面:

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

Note:像<img><video>这样的元素有时被称之为替换元素,因为这样的元素的内容和尺寸由外部资源(像是一个图片或视频文件)所定义,而不是元素自身。

Note: 你可以从 running on Github找到最终的代码(也可以看 source code

可替换的文字

下一个我们讨论的属性是 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。那么浏览器不会正确的显示图片而是会像下面一样显示出替换的文字:

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

那么,为什么我们需要 alt 属性呢? 想一想下面这些情形:

  • 用户在视力上有障碍,通过 screen reader 来浏览我们的网站 — 在这样的情况下,拥有一段描述图片的文字是非常有用的!i
  • 就像上面所说的,你也许会吧图片的路径或文件名拼错。
  • 浏览器不支持该图片类型。某些用户仍在使用只显示文字的浏览器,类似 Lynx,,将会把图片替换为描述的文字。
  • 你想要提供一些文字描述来给搜索引擎使用— 例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。
  • 用户关闭的图片显示以减少数据的传输(尤其是在使用智能手机浏览时,因为有些国家的宽带速率是有限且昂贵的)

什么才是真正应该写在 alt 属性中的文字呢? 这取决于为什么这些图片会出现在这些地方(换句话说,如果没了这些图片,你所想表达的东西会失去些什么):

  • 描述. 如果图片只是装饰,而不是内容的一部分,可以增加这样的代码 alt="" ,例如,屏幕阅读器不会浪费时间读出对用户没用的内容。装饰性图片不应该属于你的HTML文件—— CSS background images才应该用于插入装饰图片——但如果无法避免的话, alt=""是最好的方法。
  • 内容..如果你的图片提供了重要的信息,就要在alt文本中简要的提供相同的信息,甚至更近一步,在主要文本中提供所有人都能看到的内容。不要写冗长的alt文本(如果在主要文本中将所有的段落都重复两遍,对于有目的的用户来说多么令人生气啊!)。如果在主要文本中已经对图片进行了充分的描述,那么你就仅仅用alt=""就可以了。
  • 链接.如果你把图片放到 <a>标签中,图片就变成了链接。 你仍然需要提供 accessible link text(清晰的链接措辞)——在这种情况下如果你想要使其工作的更好,你可能要么将其写入同样的<a>元素中,要么将其放入图像的alt属性。
  • 文本.你不应该将文本放入图像。(比如说,如果你的主要标题需要阴影, use CSS(使用CSS)而不是将文本放到图片上面)。如果你真的无法避免这样做,你可以将文本放入alt属性。

关键是提供一个可用的体验即使图片无法显示,在这种情况下用户不会丢失任何内容。尝试在浏览器中使图片不可见然后看看会有什么事情发生。你会意识到如果图片不可见,类似于像“logo”或“my favourite place”这样的alt文本是没有帮助的。

Note:WebAIM's Alternative text guide提供了更多的关于可替换文本的细节引导,如果你想了解更多的信息的话,可以阅读这篇文章。

宽度和高度

你可以用宽度和高度属性来指定你的图片的高度和宽度(你可以用多种方式找到你的图片的宽度和高度, 例如在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">

在正常的情况下,这不会对显示产生很大的影响, 但是如果图片没有显示(例如用户刚刚开始浏览网页,但是图片还没有加载完成),你会注意到浏览器会为要显示的图片留下一定的空间:

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

这是一件好事情——这使得页面加载的更快速更流畅。

然而,你不应该使用HTML属性来改变图片的大小。如果你把尺寸设定的太大,最终图片看起来会模糊;如果太小,会在下载远远大于你需要的图片时浪费带宽。如果你没有保持正确的纵横比(aspect ratio),图片可能看起来会扭曲。在把图片放到你的网站页面之前,你应该使用图形编辑器使图片的尺寸正确。

Note: .如果你需要改变图片的尺寸,你应该使用CSS而不是HTML。

Image titles 图片标题

就像with links一样,你可以给图片增加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">

这会给我们一个提示,看起来就像link title:

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

图片标题并不必须要包含有意义的信息,通常来说,将这样的支持信息放到主要文本中而不是附着于图片会更好。不过,在有些环境中这样做更有用,比如当没有空间显示提示时,也就是在图片栏中。

动手练习:嵌入一张图片

好,轮到你了! 在这个动手练习中, 我们希望你可以做一个简单的嵌入图片练习。 你有一个 基本元素 <img> 标签; 我们希望你可以把下面这个 URL 所指向的图片嵌入到 HTML 中:

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

是的,之前我们有说过,不要从别的服务器上盗链图片. 但是这只是为了演示示例的效果 — 我们会允许你这次链接。

我们还希望你可以:

  • 添加 alt文字,添加完成后,可以故意把 URL 写错,来检查 <alt> 的效果。
  • 设置图片正确的 width 和 height 属性,(提示; 宽 200px,高 171px), 然后再将宽和高的值进行改变,看看会有什么影响.
  • 在图片上设置 title 属性.

如果你遇到了错误,你可以按 reset 按钮来重置. 如果你遇到了困难无法完成, 按下 Show solution 按钮来看一下答案.

通过为图片搭配说明文字的方式来解说图片

说到说明文字, 这里有很多种方法让你添加一段说明文字来搭配图片. 比如, 没有人会阻止你这么做:

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

这是可以的 , <p> 中包含了你需要的内容, 以及方便使用 CSS 的一种很好的风格. 但是这里有一个问题 ,从语义的角度上来讲,<img><p> 并没有什么联系, 这会给使用屏幕阅读的人造成问题, 比如 (当你有 50 张图片和其搭配的 50 段说明文字,那么哪段说明文字和哪张图片是有关联的呢?)

有一个更好的做法是使用 HTML5 的 <figure> and <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> 元素的内容.

注意: 从无障碍的角度来说, 说明文字和 alt 文字有不同的规则。说明文字同样可以为看得见图片的人们带来好处, 而 alt 文字提供同样的功能,只不过是当图片无法显示时发挥作用. 因此, 说明文字和 alt  的内容不应该一样, 因为当图片无法显示时,它们会同时出现,尝试让你的图片不显示,然后看看效果如何.

注意 <figure> 里不要求一定是一张图片 — 只要是一个独立的内容单元:

  • 简短紧凑地表达你的意思, 易于掌握的方式。
  • 可以进到页面的上下文的其他地方。
  • 为主要内容提供重要的补充说明。

所以 <figure> 可以是几张图片, 一段代码, 音频或视频, 方程式, 一个表格, 或者其他东西.

动手练习: 创建一个 figure

在这个动手练习的部分中, 我们希望你把本章节中的上一个动手练习完成的代码拿过来,把它转换为一个 figure:

  • 把之前的代码放入 <figure> 元素中.
  • 将 title 属性的文本复制出来, 删除 title 元素, 然后把文字放入 <figcaption> 元素中,当然这个元素在 <img> 的下面.

如果你遇到了错误,你可以按 reset 按钮来重置. 如果你遇到了困难无法完成, 按下 Show solution 按钮来看一下答案.

CSS 背景图片

你也可以使用 CSS 把图片嵌入网站中 (当然 JavaScript 也可以,不过那是另外一个故事了.) 这个 CSS background-image 属性 — 和另一个 background-* 属性 — 是用来控制放置背景图片,比如, 为这个页面中的所有段落元素设置一个背景图片,你可以这样做:

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

按理说,这种做法相对于 HTML 中插入图片的做法,可以更好地控制图片和设置图片的位置,那么为什么我们还要使用 HTML 图片呢? 如上所述, CSS 背景图片只是为了装饰 — 如果你只是想要在你的页面上添加一些漂亮的东西,来提升视觉效果, 那 CSS 的做法是可以的, 但是这样的图片没有任何语义的意思 — 也没有任何的文字说明, 对使用屏幕阅读的人来说,它们和不存在是一样的, etc. 这个就是 HTML 图片的优点.

因此,如果图像在您的内容方面有意义,则应使用HTML图像。 如果图像纯粹是装饰,则应使用CSS背景图片。

提示: 你可以学习更多关于 CSS background images 在我们的 CSS 话题.

总结

目前就是这样 — 我们详细介绍了图片和说明文字. 在下篇文章中,我们将提出一个难题, 看看如何使用 HTML 在网页上插入音频和视频.

文档标签和贡献者

 此页面的贡献者: nbhaohao, HashubWang, gzw, MinimalistYing
 最后编辑者: nbhaohao,