一、TDesign 简介

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

二、数据万象对 AVIF 图片格式的支持

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

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

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

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

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

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

三、AVIF 在实际应用中遇到的问题

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

• Chrome 85 +

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

• Opera 71 +

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

四、TDesign + 数据万象 AVIF 功能落地

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

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

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

<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 全局特性配置 包含各个组件的文本语言配置及其他通用配置，支持用户在默认配置的基础上进行自定义配置，如下图所示：

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;            }          },        },      }),       };  },};

五、总结

本文主要记录介绍 AVIF 图片格式在 TDesign 中的落地应用，提供一套简单快捷的方式使用 AVIF 图片格式，同时又提高 Web 和移动应用程序的性能和用户体验,便于后续其他业务接入。

📕 TDesign 往期文章，推荐阅读：

• 《TDesign 的开源故事，看完秒懂》
  

• 《TDesign 组件库技术方案指北》
  

• 《TDesign 品牌价值观》
  

• 《TDesign 品牌价值观｜视觉新基础》
  

撰文：barnett

主创团队：腾讯 TDesign Oteam