现代图片性能优化和体验优化指南

本文是系列第五篇，一章。系列文章:

1. 现代图片性能优化和体验优化指南 - 图片类型及 Picture 标签的使用
2. 现代图片性能优化和体验优化指南 - 响应图片方案
3. 现代图片性能优化和体验优化指南 - 精细展示缩放，避免布局偏移，拉伸
4. 现代图片性能优化和体验优化指南 - 懒惰加载和异步图像解码方案

图片资源在我们的业务中占据了很大的一部分，尤其是对带宽的消耗。

图片的性能优化和体验优化在今天尤为重要。本文将从各个方面阐述如何优化我们的图片资源、性能优化和体验优化。

图片资源的容错和可访问性处理

OK，在一章中，我们将简要介绍图片资源的容错和可访问性处理。

可访问性处理图片

在我们的网站上，可访问性(A11Y)是一个非常重要的环节，但大多数学生很容易忽略它。

在一些重交互、重逻辑的网站中，我们需要从高可访问性的角度考虑用户的使用习惯和场景。例如，如果用户没有鼠标，只使用键盘，他们能顺利地使用我们的网站吗？

非常重要的一点是，提高可访问性也可以让普通用户更容易理解 Web 内容。

基于 Usability & Web Accessibility - image

对于图像信息，我们需要遵循以下可访问性原则：

• 所有意义 img 元素必须有 alt 属性
• 提供替代 alt 其他方式的属性
• 用辅助技术隐藏装饰图像

第一点很容易理解。必须提供所有有意义的图片元素 alt 属性。

第二点更有趣，在 A11Y 其实有一套 WAI-ARIA 标准。WAI-ARIA 是为残疾人提供无障碍访问动态、可交互网络内容的技术规范。

简单地说，它提供了一些属性来增强标签的语义和行为：

• 可以使用 tabindex 属性控制元素能否聚焦，是否/参与顺序键盘导航
• 可以使用 role 使用属性来识别元素的语义和功能，例如
  Save
  模拟一个按钮
• 还有大量的 aria-* 属性，表示元素的属性或状态，帮助我们进一步识别和实现元素的语义化，优化无障碍体验

上述第二点，提供替代 alt 其他方式的属性 它的意思是使用 WAR-ARIA 提供规范等 aria-label 和 aria-labelledby 属性为图像提供可访问的名称。

当这些属性存在时，辅助技术(屏幕阅读器)会忽略图像 alt 属性并读取 ARIA 标签。

而第三点，用辅助技术隐藏装饰图像，这是什么意思？

上面第一点 所有意义 img 元素必须有 alt 属性，另一方面，页面上也会有毫无意义的装饰图片，这实际上是辅助技术(屏幕阅读器)可以忽略的。

对于没有任何功能或信息内容的装饰图像，屏幕阅读器可以通过多种方式隐藏：

• 使用空的 alt 属性
• 使用 ARIA 属性 role="presentation" 标记图片元素的装饰可以忽略图片
• 使用 CSS background 以这种方式呈现这些图片

alt 不要与 title 混淆

OK，以下是一些有趣的细节。

有一个很基础的知识，简单过一下，也就是图片元素，alt 与 title 的差异：

• 图片中的 alt 当图片无法正常显示时，属性是文本提示。
• 图片中的 title 属性是鼠标移动到元素上的文本提示。

正确使用 alt 属性

对于使用屏幕阅读器的用户来说，图片无法正常显示或浏览。基于此，我们需要充分利用它 alt 属性，或以上aria-label 和 aria-labelledby 属性。

那么，这些属性中的内容应该填充什么呢？我们需要根据图片的功能来区分：

• 信息图像：以图形形式表示概念和信息的图像，通常是图片、照片和插图。alt 替代文本至少应该是一个简短的描述来传达图像所呈现的基本信息。

• 装饰图像：当图像的唯一目的是为页面添加视觉装饰，而不是传达对理解页面非常重要的信息时，如上所述，使用空的 alt，譬如 alt=""

• 功能图像：用作链接或按钮图像的替代文本应描述链接或按钮的功能，而不是视觉图像。此类图像的示例是打印机图标或提交表单的按钮，表示打印功能。

• 文本图像：可读文本有时出图像中。如果图片不是标志，请避免文本出图片中。然而，如果使用文本图像，替代文本应包含与图像中相同的单词。

• 图形和图表等复杂图像：提供与图像中提供的数据或信息等效的完整文本作为替代文本，以传达数据或详细信息。

• 图像组：如果多个图像传达一个信息，则图像的替代文本应传达整个信息。

• 图像映射：包含多个可点击区域的图像替代文本应为链接集提供整体上下文。每个可单独点击的区域都应该有一个替代文本来描述链接的目的地或目的地。

其实 alt 有很多知识。如果我们的页面能做到这一点，那真的是从根本上思考，开始优化用户体验。

img 元素与 background 元素的取舍

OK，所以，说到这里，还有一个有趣的点应该自然地提到。

也就是说，我们什么时候应该使用它 什么时候使用元素？ background 内嵌图片？

我们可以从性能及功能考虑两个方面：

事实上，性能并不是核心考虑因素，因为我们也提到了今天可以大规模使用的问题 loading="lazy" 属性，图片可以用本地支持的懒惰加载。

我们在考虑选择 还是 backgroud-image 在这个时候，更多的是考虑图片功能。一般来说，作为装饰性和无语义的装饰图片，选择使用 background-image，与网页内容相关的使用更为重要 标签。

使用语义图片是因为使用语义图片 显示器的一个优点是，当图片加载失败时，元素可以触发 onerror 事件，我们可以有效地利用这一点，异常处理图片。

图片的异常处理

当图片链接挂断，加载失败时，我们应该如何处理更好的方法？

有很多方法可以处理。在张新旭先生的文章中 -- 图片加载失败后，CSS风格处理最佳实践 有很好的练习。

核心思想如下：

1. 图片加载失败，触发 元素的 onerror 事件，加载失败 元素增加了一个样式类
2. 采用新款式类，配合 元素的伪元素可以一起展示，同时展示默认的底图 元素的 alt 信息

img.error {
    position: relative;
    display: inline-block;
}

img.error::before {
    content: "";
    /** 定位代码 **/
    background: url(error-default.png);
}

img.error::after {
    content: attr(alt);
    /** 定位代码 **/
}

我们使用伪元素 before ，加载默认错误的底图，使用伪元素 after，展示图片的 alt 信息：

OK，在这一点上，即使完成了图片的完整处理，也更好地阐述了为什么，有语义，有语义 alt 信息的图片，我们应该用 实现元素。这是因为当错误发生时，我们可以更好地展示图片，让用户直观地看到它们 alt 内容。

完整的 Demo 这里可以戳一下：

CodePen Demo -- 图片处理

当然，上述方案有两个小问题：

1. 对于每一个 我们都需要写一段元素 onerror="this.classList.add('error');" 代码，有点重复。这项工作也可以交给。 JavaScript 全局完成，我们可能需要判断 alt 使用默认图片时，值是否为空？ alt 兜底文案。
2. 早年间， 等替换元素没有伪元素，后面 Chrome/Firefox 浏览器逐渐支持当， 的 src 当拉失败时，支持 只有上述方案才能显示元素的伪元素。然而，目前 Safari 这个特性还是不支持，所以，在 Safari 下面，我们可能会得到以下结果：

还是有效果的 OK 是的，只是没有底图的显示，在实际使用过程中，需要知道这一点。

一下

本章节，对图片资源的容错和可访问性处理阐述。核心内容如下：

1. 对于图像信息，我们需要遵循以下可访问性原则：
   • 所有意义 img 元素必须有 alt 属性
   • 提供替代 alt 其他方式的属性
   • 用辅助技术隐藏装饰图像
2. 正确使用 alt 属性，不同场景下的属性， alt 该填什么内容？
3. img 元素与 background 元素的取舍
4. 处理图片异常的最佳实践

到目前为止，整个现代图片性能优化和体验优化指南已经成功结束。整个系列的文章包含了许多新的规范和特点，需要根据实际情况灵活选择和使用。

同时，我们也应该看到，前端技术只在这个小领域不断迭代和创新。虽然很难，但我们仍然需要不断丰富自己，以跟上新的趋势。鼓励。