图像是Web中最常见的媒体属性之一，对于开发者而言，都知道使用HTML的<img>元素或CSS的background-image属性可以将图像放到Web上，但更多的时候都在聊，如何使用CSS相关的属性来处理Web中的图像，比如使用图像的适配、图像效果的处理等。事实上，HTML中的<img>元素也有很多属性对于我们在Web中使用图像起着重要的作用，特别是随着前端技术革新，<img>新增了一些新的属性，比如srcset、sizes、loading和intrinsicsize等。

在这篇文章中，主要想和大家聊聊HTML的<img>中这些新增的属性对Web图像带来哪些方面的变化。如果你对CSS如何处理Web图像相关的知识感兴趣的话，可以阅读下面这些文章：

• 图像优化
• 探索Web上图片使用方式
• 给Web页面提供正确图像的姿势
• CSS处理图像效果
• Flexible Images
• Responsive Images 101

img元素的属性

HTML的<img>元素有很多个属性，有一些属性是不怎么常用的，甚至从未使用过，比如crossorigin、decoding、importance等；有些属性是常用的，比如src、alt、width、height、title等；有些属性是在HTML5中新增加的，比如srcset、sizes、loading、intrinsicsize等。其中有的属性是使用<img>必用的属性，比如 src，有些是用来优化性能的，比如loading，而且HTML中还有很多 全局属性 也可以运用于该元素上。

下面和大家一起聊聊其中一些有意思的属性。

指定图像源：src

Web开发者都知道使用<img>元素可以把图像放到Web页面或Web应用上。它是一个空元素（它不需要包含文本内容或闭合标签），只不过至少需要一个 src 属性来使用其生效。src属性包含了指向我们想要引入的图像路径，可以是相对路径或绝对路径，就像<a>元素的href属性一样。

来看个例子，比如说你想把一个文件名为grapefruit-slice-332-332.jpg的图像，且它与你的HTML页面存放在相同的路径下，那么你可以像下面这样将图像嵌入到页面中：

<img src="grapefruit-slice-332-332.jpg" />

不过，在构建一个项目的时候，图像一般会放到一个文件目录为images下，那么引用的时候就像下面这样：

<img src="images/grapefruit-slice-332-332.jpg" />

上面示例中src采用的是相对路径方式，你也可以使用一个绝对路径地址，比如：

<img src="//www.w3cplus.com/sites/default/files/blogs/2020/2003/grapefruit-slice-332-332.jpg" />

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

很多时候会把图像存放在CDN，也可得到一个绝对路径。

如果图片加载没有出问题的话，就会看到你想的图片效果，如果加载失败的话，会有一个缩略图标（不同的浏览器看到的效果会有所不同）：

如果在加载或渲染图像时发生错误，且设置了至少一个 onerror 事件处理器来处理 error 事件，那么设置的事件处理器就会被调用。这样的错误可能发生在各种不同的情况下，包括：

• src 属性的属性值为空（""）或者 null
• src 属性的 URL 和用户正在浏览的页面的 URL 完全相同
• 图像出于某些原因损坏了，从而无法加载
• 图像的元数据被破坏了，无法检索它的分辨率/宽高，而且在 <img> 元素的属性中没有指定宽度和/或高度
• 用户代理尚未支持该图片所用的格式

在使用src给<img>指定加载的图片时，有的时候会使用JavaScript动态脚本来给src指定值，有的时候可能会给src指定一个空的或一些字符，比如像下面这样的一个示例：

<img src="//www.w3cplus.com/sites/default/files/blogs/2020/2003/grapefruit-slice-332-332.jpg" alt="" />
<img src="#" alt="" />
<img src="" alt="" />

在这种情况下的时候，对于src="#"来说，也会发生一个HTTP请求，而对于src=""不会发生任何的请求，如下所示：

注意，不同的浏览器下有所差异

添加备选文案：alt

接下来讨论的是alt属性。上面的示例中你可能发现了，图片加载失败之后不同的浏览器渲染出来的效果会有所不同。而我们使用img将图像嵌入到页面中时，很多时候是因为图像也是Web的一个重要信息。因此，就算是图片加载失败了，我们也希望用户能获取到相关的信息。这个时候我们就需要使用img的另一个重要属性，即 alt 属性。该属性的值是用来描述图像相关的信息或者用来描述图像在Web中上下文的相关信息。比如上面的示例我们可以修改成：

<img src="//www.w3cplus.com/sites/default/files/blogs/2020/2003/grapefruit-slice-332-332.jpg" alt="图像" />
<img src="#" alt="图像" />
<img src="" alt="图像" />

图像加载失败或不能正常显示的时候，浏览器就会把alt指定的值显示出来，只不过不同的浏览器下显示效果有所差异：

注意：无法使用CSS来对img加载失败时设置alt在浏览器中显示效果。

那么为什么要使用alt给img指定上下文信息呢？那是因为它可以派上用场的原因很多：

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

你到底应该在 alt 里写点什么呢？这首先取决于为什么这张图片会在这儿，换句话说，如果这张图片没显示出来，会少了什么：

• 装饰：如果图片只是用于装饰，而不是内容的一部分，可以写一个空的 alt="" 。例如，屏幕阅读器不会浪费时间对用户读出不是核心需要的内容。实际上装饰性图片就不应该放在HTML文件里， CSS 的background-image才应该用于插入装饰图片，但如果这种情况无法避免， alt=""会是最佳处理方案
• 内容：如果你的图片提供了重要的信息，就要在alt文本中简要的提供相同的信息，甚至更近一步，把这些信息写在主要的文本内容里，这样所有人都能看见。不要写冗余的备选文本（如果在主要文本中将所有的段落都重复两遍，对于没有失明的用户来说多烦啊！），如果在主要文本中已经对图片进行了充分的描述，写alt=""就好
• 链接：如果你把图片嵌套在<a>标签里，来把图片变成链接，那你还必须提供无障碍的链接文本。在这种情况下，你可以写在同一个<a>元素里，或者写在图片的alt属性里，随你喜欢
• 文本：你不应该将文本放到图像里。例如，如果你的主标题需要有阴影，你可以用CSS来达到这个目的，而不是把文本放到图片里。如果真的必须这么做，那就把文本也放到alt里

本质上，关键在于在图片无法被看见时也提供一个可用的体验，这确保了所有人都不会错失一部分内容。记得在A11Y系列教程中的《编写HTML时要考虑可访问性》一文中也特别讨论过，应该如何给alt添加描述内容。如果你实在不知道怎么给alt添加内容时，可以按照下图方式来做出相应的选择：

来看一个示例：

比如上图嵌入到Web时，我们就可以像下面这样给alt添加描述信息：

<!-- 不好的用法: 没有使用alt --> 
<img src="bird.png" /> 

<!-- 一般般的用法：显式设置了`alt`，但是个空值 --> 
<img src="bird.png" alt="" /> 

<!-- 好的用法：alt描述了图片的信息(公鸡)，告诉用户这是只公鸡 --> 
<img src="bird.png" alt="公鸡" /> 

<!-- 更好的用法：alt描述了图片的信息（公鸡啼鸣），告诉用户这是只正在啼鸣的公鸡 --> 
<img src="bird.png" alt="公鸡啼鸣" /> 

<!-- 最好的用法：alt描述了图片的信息（红色冠公鸡啼叫）,告诉用户这是只正在啼鸣的红色冠公鸡 --> 
<img src="bird.png" alt="红色冠公鸡啼鸣" />

在HTML的规范中，也特别的提到过，img元素代表什么主要取决于 src属性和alt属性。

图像标题：title