乐趣区

关于前端:现代图片性能优化及体验优化指南-图片资源的容错及可访问性处理

jiezi

本文是系列第五篇，终章。系列文章：

  1. 古代图片性能优化及体验优化指南 – 图片类型及 Picture 标签的应用
  2. 古代图片性能优化及体验优化指南 – 响应式图片计划
  3. 古代图片性能优化及体验优化指南 – # 缩放精细化展现及防止布局偏移、拉伸
  4. 古代图片性能优化及体验优化指南 – 懒加载及异步图像解码计划

图片资源，在咱们的业务中堪称是占据了十分大头的一环，尤其是其对带宽的耗费是非常微小的。

对图片的性能优化及体验优化在明天就显得尤为重要。本文，就将从各个方面论述，在各种新个性满头飞的明天，咱们能够如何尽可能的对咱们的图片资源，进行性能优化及体验优化。

图片资源的容错及可拜访性解决

OK，最初一个章节，咱们简略聊一聊图片资源的容错及可拜访性解决。

图片的可拜访性解决

可拜访性（A11Y），在咱们的网站中，属于十分重要的一环，然而大部分同学都容易漠视它。

在一些重交互、重逻辑的网站中，咱们须要思考用户的应用习惯、应用场景，从高可拜访性的角度思考，譬如假如用户没有鼠标，仅仅应用键盘，是否顺畅的应用咱们的网站？

十分重要的一点是，进步可拜访性也能让普通用户更容易了解 Web 内容。

基于 Usability & Web Accessibility – image

对于图像信息，咱们须要大抵遵循如下可拜访性准则：

  • 所有有意义的 img 元素必须有 alt 属性
  • 提供代替 alt 属性的其余形式
  • 应用辅助技术暗藏装璜图像

第一点十分好了解，所有的有意义的图片元素都必须要提供 alt 属性。

第二点比拟有意思，在 A11Y 中，其实有一套 WAI-ARIA 规范。WAI-ARIA 是一个为残疾人士等提供无障碍拜访动静、可交互 Web 内容的技术规范。

简略来说，它提供了一些属性，加强标签的语义及行为：

  • 能够应用 tabindex 属性管制元素是否能够聚焦，以及它是否 / 在何处参加程序键盘导航
  • 能够应用 role 属性，来标识元素的语义及作用，譬如应用 <div id="saveChanges" tabindex="0" role="button">Save</div>来模仿一个按钮
  • 还有大量的 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，那么，讲到这里，还有一个有意思的点就很天然的应该被提及。

那就是咱们应该什么时候应用 <img> 元素，什么时候应用 background 内嵌图片？

咱们能够从 性能 及性能 两个方面进行思考：

类型 img backgroud-image
图层地位 前景 背景
默认初始尺寸 不定 固定
是否会产生回流重绘 会 不会
图片加载失败 能够触发元素的 onerror 事件，展现 alt 属性 无奈无效设置异样解决场景
应用场景 Logo、产品图片、广告图片 装饰性无语义内容等

其实性能上并不是外围思考的点，因为上文咱们也讲到了在明天能够大规模应用是 loading="lazy" 属性，图片能够进行原生反对的懒加载。

咱们在思考选取 <img> 还是 backgroud-image 的时候，更多的还是从图片性能上进行思考。一般来说，作为润饰的且无语义的装饰性图片抉择应用 background-image，而比拟重要的与网页内容相干的就应用 <img> 标签。

因为有语义的图片应用 <img> 展现，它的一个益处在于，当图片加载失败的时候，能够触发元素的 onerror 事件，咱们能够无效的利用这一点，对图片进行异样解决。

图片的异样解决

当图片链接挂了，加载失败了，咱们比拟好的解决形式应该是怎么样呢？

解决的形式有很多种。在张鑫旭老师的这篇文章中 — 图片加载失败后 CSS 款式解决最佳实际 有一个不错的实际。

外围思路为：

  1. 利用图片加载失败，触发 <img> 元素的 onerror 事件，给加载失败的 <img> 元素新增一个款式类
  2. 利用新增的款式类，配合 <img> 元素的伪元素，在展现默认兜底图的同时，还能一起展现 <img> 元素的 alt 信息
<img src="test.png" alt="Alt Info" onerror="this.classList.add('error');">
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 信息的图片，咱们应该应用 <img> 元素来实现。这是因为，咱们能够在谬误产生的时候，比拟好的对图片进行兜底展现，让用户直观的可能看到 alt 内容。

残缺的 Demo 你能够戳这里看看：

CodePen Demo — 图片解决

当然，上述计划存在两个小问题：

  1. 对于每一个 <img> 元素，咱们都须要写一段 onerror="this.classList.add('error');" 代码，有点反复。因而，这个工作也能够交给 JavaScript 全局性的实现，并且，咱们可能须要判断 alt 的值是否为空，在为空时，应用默认图片 alt 兜底文案。
  2. 早年间，<img> 等替换元素是没有伪元素的，前面 Chrome/Firefox 浏览器逐步反对了当，<img> 的 src 拉取失败时，反对 <img> 元素的伪元素展现，这才有了上述的计划，然而，目前 Safari 仍不反对这个个性，所以，在 Safari 下，咱们可能失去如下的后果：

成果依然还是 OK 的，只是没有了兜底图的展现，在理论应用过程中，须要晓得这一点。

总结一下

本章节，对 图片资源的容错及可拜访性解决 进行了论述。核心内容在于：

  1. 对于图像信息，咱们须要大抵遵循如下可拜访性准则：

    • 所有有意义的 img 元素必须有 alt 属性
    • 提供代替 alt 属性的其余形式
    • 应用辅助技术暗藏装璜图像
  2. 正确应用 alt 属性，理解不同场景下 alt 应该填充什么内容
  3. img 元素与 background 元素的取舍
  4. 图片异样解决的最佳实际

至此，整个古代图片性能优化及体验优化指南到此就圆满结束，整个系列的文章囊括了十分多的新的标准及个性，须要大家在实践中依据理论状况灵便选取应用。

同时，咱们也应该能看到，前端技术仅仅在这一小个畛域，都在一直的迭代翻新。尽管很难，还是须要一直空虚本人跟上新的潮流。共勉。

最初

OK，本文到此结束，心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版