使用体验 I 早知道 TDesign 支持 AVIF 图片压缩，我就不用为流量和格式发愁啦！

云存储

发布于 2023-05-24 10:40:09

4340

发布于 2023-05-24 10:40:09

文章被收录于专栏：用户5909132的专栏用户5909132的专栏

本文2600字

预计阅读时间：7分钟

TDesign 是公司内部推出的一套高质量、易用、易扩展的设计系统。它除了提供 UI 组件库以外，还提供了一套完整的设计规范和文档，可以帮助设计师和开发者更好地协作，提高产品的设计质量和用户体验。

详情参考：TDesign 介绍

https://tdesign.tencent.com/about/introduce

关于 AVIF 的概念及在数据万象的处理方式：

数据万象--腾讯云集大成的数据处理产品，很早前便推出了图片压缩服务，支持多种压缩方式：Guetzli 压缩、tpg 压缩、HEIF 压缩、Webp 压缩等，近期又加入了最流行的 AVIF 图片压缩。用户将目标图片上传到存储桶后，就可以将图片转换为 AVIF 格式。

除了上述使用方式，数据万象在去年上线的智能工具箱，也加入了 AVIF 图片压缩在线体验功能，可让用户零门槛地得到 AVIF 图片格式。

智能工具箱地址：

https://console.cloud.tencent.com/cos/toolbox/home

如下图所示，上传完图片后，可在压缩模块看到不同格式的压缩后的文件大小和压缩比，点击查看按钮可预览效果，后续可选择点击下载，将 AVIF 格式的图片下载到本地，也可以点击复制链接，拿到图片 url 方便后续的使用。

如果选择的存储桶未开启高级图片压缩，会看到如下提示：

点击图片高级压缩后，在新跳转的页面开启图片高级压缩开关后返回工具箱页面，即可开始对 AVIF 图片格式的后续操作。

根据最新的兼容性统计，我们可以看到，我们可以使用的浏览器版本：

● Chrome 85 +

● Firefox 77 + (77-91 需要在浏览器设置中开启 AVIF 支持功能)

● Opera 71 +

在数据万象得到 AVIF 格式的图片之后，我们怎么解决它的兼容性问题呢？TDesign 结合数据万象为 web 开发者们提供了一套简洁、高效的解决方案。

TDesign 的 Image 组件是一种图像展示组件，当需要对图像内容进行陈列、展示、以便用户快速了解图像信息时，会用到 Image 组件。TDesign 团队与数据万象团队合作，推出了两种方法来使用 AVIF 格式的图片。

1. Image 组件支持 AVIF 图片格式的渲染

操作代码如下所示，Image 组件支持使用 srcset 属性设置特殊格式的图片渲染。

详情参考：Image 组件文档

https://tdesign.tencent.com/vue/components/image#%E6%94%AF%E6%8C%81-avif-%E5%92%8C-webp-%E6%A0%BC%E5%BC%8F%E7%9A%84%E5%9B%BE%E7%89%87

<t-image      src="  https://tdesign.gtimg.com/demo/demo-image-1.png  "      :srcset="{        'image/avif': '  https://tdesign.gtimg.com/img/tdesign-image.avif  ',        'image/webp': '  https://tdesign.gtimg.com/img/tdesign-image.webp  ',      }"/>

在组件内部拿到图片链接时，会使用 picture 标签来渲染，自动生成 picture 标签降级的写法。

如下图所示，它允许渐进式支持，可以按照我们希望加载的顺序列出图像源，浏览器将加载它支持的第一个源，如果浏览器不支持，那就使用默认的链接。

这种方式最终是使用 picture 标签渲染，不用用户去判断当前浏览器是否支持 AVIF 图片格式，但需要挨个组件去设置，且 picture 标签本身有兼容性问题。

2. 通过全局配置参数，对 Image 组件的 src 统一替换为 AVIF

如果不想对所有 Image 组件传参，可在全局统一替换 Image 组件的 src，设置一次即可，且最终渲染不需要 picture 标签，但需要用户自己判断当前浏览器是否支持 AVIF 图片格式。

TDesign 全局特性配置包含各个组件的文本语言配置及其他通用配置，支持用户在默认配置的基础上进行自定义配置。

详情参考：全局特性配置

https://tdesign.tencent.com/vue/config?tab=api#imageconfig

如下图所示：

ImageConfig 对象里的 replaceImageSrc 参数可在全局层面替换图片地址，params 是传入的整个 ImageProps，根据不同的 params 返回不同的 url，操作代码如下：

let canAvif = false;
// 检查浏览器是否支持 avifconst checkAvif = (cb) => {  const img = new Image();  img.onload = () => cb(true);  img.onerror = () => cb(false);  img.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAABgAAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQAMAAAAABNjb2xybmNseAACAAIABoAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACBtZGF0EgAKCBgABogQEDQgMgofQAAAWAAAAK/2";};checkAvif(isSupport => canAvif = isSupport);
export default {  data() {    return {      // 全局特性配置，可以引入英文默认配置 enConfig，还可以在默认配置的基础上进行自定义配置      globalConfig: merge(enConfig, {        image: {          // 全局替换图片地址          replaceImageSrc(attr) {            if (canAvif) {              // 如果使用数据万象 AVIF，可以使用下载时 AVIF 压缩，对文件路径追加 avif 参数 ?imageMogr2/format/avif/rquality/75              // 如果是自行对 jpg/png 预处理为 avif，放在同名后缀下可以如下替换。              return src.replace(/.(jpg|png)$/, '.avif');            } else {              return attr.src;            }          },        },      }),       };  },};

对于 Web 应用程序开发者而言，TDesign Image 组件提供的两种渲染 AVIF 图片的方法，可以帮你解决兼容性问题，提高开发效率，降低运营成本，让 Web 应用程序更加高效、美观和易用。