图片

插入图片

我们可以用 <img> 元素来把图片放到网页上。它是一个空元素(也就是无法包含内容，可以省略闭合标签)，最少只需要一个 src (一般读作其全称 source)来使其生效。src 属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对 URL，就像 <a> 元素的 href 属性一样。

如果您有一幅文件名为 dinosaur.jpg 的图片，且它与您的 HTML 页面存放在相同路径下，那么您可以这样嵌入它:

<img src="dinosaur.jpg" />

如果这张图片存储在和 HTML 页面同路径的 images 文件夹下(这也是 Google 推荐的做法，利于 SEO/索引)，那么您可以采用如下形式:

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

提示

搜索引擎也读取图像的文件名并把它们计入 SEO。因此您应该给您的图片取一个描述性的文件名: dinosaur.jpg 比 img835.png 要好。

您也可以像下面这样使用绝对路径:

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

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

警告

大多数图片是有版权的。不要在您的网页上使用一张图片，除非:

• 您是图片版权所有者
• 您有图片版权所有者明确的、书面上的使用授权
• 您有充分的证据证明这张图片是公共领域内的

侵犯版权是违法并且不道德的。此外，在得到授权之前永远不要把您的 src 属性指向其他人网站上的图片。这被称为"盗链(hotlinking)"。同样，盗取其他人的带宽也是违法的。而且这会降低您的页面的加载速度，而且图片可能会在不受您控制的情况下被移走或用别的令人尴尬的东西替换掉。

相关信息

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

备选文本

alt 的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。

案例

<img
  src="http://mrhope.site/assets/img/dinosaur_small.jpg"
  alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"
/>

测试 alt 属性最简单的方式就是故意拼错图片文件名，这样浏览器就无法找到该图片从而显示备选的文本。

设置备选文本的原因有很多:

• 用户有视力障碍，通过屏幕阅读器来浏览网页 。事实上，给图片一个备选的描述文本对大多数用户都是很有用的。
• 就像上面所说的，您也许会把图片的路径或文件名拼错。
• 浏览器不支持该图片类型。
• 您会想提供一些文字描述来给搜索引擎使用，例如搜索引擎可能会将图片的文字描述和查询条件进行匹配。
• 用户关闭的图片显示以减少数据的传输，这之前在手机上是十分普遍的，并且在一些国家带宽有限且昂贵。

alt 中的内容取决于图片的作用:

• 装饰:

  如果图片只是用于装饰，而不是内容的一部分，可以写一个空的 alt=""。例如，屏幕阅读器不会浪费时间对用户读出不是核心需要的内容。实际上装饰性图片就不应该放在 HTML 文件里， CSS 背景图片 才应该用于插入装饰图片，但如果这种情况无法避免， alt="" 会是最佳处理方案。

• 内容:

  如果您的图片提供了重要的信息，就要在 alt 文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。不要写冗余的备选文本，如果在主要文本中已经对图片进行了充分的描述，写 alt="" 就好。

• 链接:

  如果您把图片嵌套在 <a> 标签里，来把图片变成链接，那您还必须提供无障碍的链接文本。在这种情况下，您可以写在同一个 <a> 元素里，或者写在图片的 alt 属性里，随您喜欢。

• 文本:

  您不应该将文本放到图像里。例如，如果您的主标题需要有阴影，您可以用 CSS 来达到这个目的，而不是把文本放到图片里。如果真的必须这么做，那就把文本也放到 alt 里。

本质上，关键在于在图片无法被看见时也提供一个可用的体验，这确保了所有人都不会错失一部分内容。

宽度和高度

您可以用宽度和高度属性来指定您的图片的高度和宽度。

设置宽度和高度

<img
  src="http://mrhope.site/assets/img/dinosaur_small.jpg"
  alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
  width="400"
  height="341"
/>

在正常的情况下，这不会对显示产生很大的影响， 但是如果图片没有显示(例如用户刚刚开始浏览网页，但是图片还没有加载完成)，您会注意到浏览器会为要显示的图片留下一定的空间。这会使得页面加载更令人愉悦，而不是被跳动的内容布局所困扰。

注意

不应使用 HTML 属性来改变图片的大小。

• 如果您把尺寸设定的太大，最终图片看起来会模糊；
• 如果太小，会在下载远远大于您需要的图片时浪费带宽；
• 如果您没有保持正确的宽高比，图片可能看起来会扭曲。

在把图片放到您的网站页面之前，您应该使用图形编辑器使图片的尺寸正确。

图片标题

类似于超链接，您可以给图片增加 title 属性来提供需要更进一步的支持信息。

图片标题

<img
  src="http://mrhope.site/assets/img/dinosaur_small.jpg"
  alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum"
/>

这会给我们一个鼠标悬停提示，看起来就像链接标题。

图片标题并不必须要包含有意义的信息，通常来说，将这样的支持信息放到主要文本中而不是附着于图片会更好。不过，在当没有空间显示提示时这样做更有用，比如在一个图库样式的照片流中。

然而并不建议使用 title。title 会带来易访问性的问题，屏幕阅读器的支持是不可预测的，而且大多数浏览器在鼠标悬停外都不会显示它。

提示

您可以使用 balloon-css 库很好的解决这个问题

搭配说明文字

HTML5 的 <figure> 和 <figcaption> 元素为图片提供一个语义容器，在标题和图片之间建立清晰的关联。

HTML5 语义容器

<figure>
  <img
    src="http://mrhope.site/assets/img/dinosaur_small.jpg"
    alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
    width="400"
    height="341"
  />
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

这个 <figcaption> 元素 告诉浏览器和其他辅助的技术工具这段说明文字描述了 <figure> 元素的内容。

注意

从无障碍的角度来说，说明文字和 alt 文本扮演着不同的角色。看得见图片的人们同样可以受益于说明文字，而 alt 文字只有在图片无法显示时才这样。

figure 的使用

<figure> 里不一定要是一张图片，只要是一个这样的独立内容单元:

• 用简洁、易懂的方式表达意图。
• 可以置于页面线性流的某处。
• 为主要内容提供重要的补充说明。

<figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。

自适应的图片

在这一部分中，我们将看看上面说明的两个问题，并且展示怎样用 HTML 的响应式图片来解决这些问题。

分辨率切换

我们想要显示相同的图片内容，仅仅依据设备来显示更大或更小的图片。标准的 <img> 元素传统上仅仅让您给浏览器指定唯一的资源文件。

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />

但是 srcset 和 sizes 可以提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。

<img
  srcset="
    elva-fairy-320w.jpg 320w,
    elva-fairy-480w.jpg 480w,
    elva-fairy-800w.jpg 800w
  "
  sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>

srcset 和 sizes 属性看起来很复杂，但是他们并不难理解。每个值都包含逗号分隔的列表。

srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。在每个逗号之前，我们写:

1. 一个文件名 (elva-fairy-480w.jpg.)
2. 一个空格
3. 图像的固有宽度(以像素为单位)(480w)

注意

注意使用 w 单位，而不是您预计的 px。这是图像的真实大小。

sizes 定义了一组媒体条件(例如屏幕宽度)并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。在这种情况下，在每个逗号之前，我们写:

1. 一个媒体条件((max-width:480px))——您会在 CSS topic 中学到更多的。但是现在我们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，我们说“当可视窗口的宽度是 480 像素或更少”。
2. 一个空格
3. 当媒体条件为真时，图像将填充的槽的宽度(440px)

提示

您也许会提供宽度一个固定值 (px, em) 或者是一个相对于视口的长度(vw)。最后一个槽的宽度是没有媒体条件的，它是默认的，当没有任何一个媒体条件为真时，它就会生效。当浏览器成功匹配第一个媒体条件的时候，剩下所有的东西都会被忽略，所以要注意媒体条件的顺序。

所以，有了这些属性，浏览器会:

1. 查看设备宽度
2. 检查 sizes 列表中哪个媒体条件是第一个为真
3. 查看给予该媒体查询的槽大小
4. 加载 srcset 列表中引用的最接近所选的槽大小的图像

老旧的浏览器不支持这些特性，它会忽略这些特征。并继续正常加载 src 属性引用的图像文件。

提示

在本博客 HTML 文件中的 <head> 标签里，您将会找到这一行代码 <meta name="viewport" content="width=device-width">。这行代码会强制地让手机浏览器采用它们真实可视窗口的宽度来加载网页。

有些手机浏览器会提供不真实的可视窗口宽度, 然后加载比浏览器真实可视窗口的宽度大的宽度的网页，然后再缩小加载的页面，这样的做法对响应式图片或其他设计，没有任何帮助。