有奖捉虫:办公协同&微信生态&物联网文档专题 HOT

简介

在移动互联网时代,越来越多的人开始用微信小程序来进行各种活动和交流,其中图片的使用非常普遍。然而,图片的高清化、大图化等问题也导致了图片在传输过程中所占用的流量越来越大。腾讯云 数据万象(Cloud Infinite,CI) 提供了高效、便捷、性价比高的 图片压缩 功能,保证图片质量的情况下,大幅度减小图片大小,帮助用户节省流量。
数据万象提供的图片压缩能力,能将图片转换为 WebP/AVIF 等压缩格式,这些格式相较于传统的 jpg/png 格式,更加高效,能够在保证图片质量的情况下,大幅度减小图片大小。AVIF 格式的图片相较于其他图片格式,具有压缩率更高,压缩效果更佳的优点,但是目前存在兼容性问题。本文将会为开发者介绍,在微信小程序中如何通过数据万象提供的图片自适应压缩能力让您的小程序无缝兼容 AVIF/WebP 。

AVIF 兼容性说明

AVIF 作为一种前沿的压缩图像格式,在部分较老的设备或应用程序上可能无法正常查看,您在微信小程序中可以通过 accept 头部或 UA /版本来判断是否支持:
Android 系统小程序:需判断 UA 包含 XWEB;
IOS 系统小程序:需要 IOS 系统的版本高于 16.0。
为了解决微信小程序中 AVIF 图片格式的兼容性问题,可以采用下述方案。

前提条件

登录 数据万象控制台,并开通数据万象服务。
已创建和绑定存储桶,可参考 存储桶操作
将待压缩的图片上传至存储桶中。

实践方案

基础:在小程序中应用图片自适应压缩

数据万象推出的图片自适应压缩,基于万象的图片压缩能力,可以根据终端能力进行最优图片格式压缩,解决前端兼容问题。开启后系统会根据 accept 请求头自动判断终端是否支持预览相应压缩格式的图片,若支持则进行实时压缩,若全都不支持则返回原图。推荐您开启 WebP 与 AVIF 格式,如果不支持 AVIF 图片格式,则可以自动加载 WebP 图片格式,如 WebP 也不支持则自动加载原图。
说明
使用图片自适应压缩,必须通过 CDN 分发图片。
操作步骤如下:
1. 开启自定义 CDN 加速域名,详情可查看 开启自定义 CDN 加速域名
2. 开启图片自适应压缩功能,推荐开启 WebP 与 AVIF 格式。


3. 获取图片的 CDN 链接。使用 CDN 分发图片,图片链接结构形式为:< CDN 域名>/<对象键>。假设 CDN 域名为:https://www.cdndomain.com,对象键为:test.png,则图片的访问链接为:https://www.cdndomain.com/test.png
4. 小程序上使用 image 标签加载图片。
<image mode="aspectFit" src="https://www.cdndomain.com/test.png"></image>
预览效果如下图所示:



以示例图片为例,下表展示了 AVIF 图片和 WebP 图片的压缩率。
图片格式
图片大小
压缩率
原图
1.37MB
-
AVIF 压缩图片
29.05KB
97.9%
WebP 压缩图片
64.59KB
95.3%
说明
若存储桶为私有读写,则对象地址需要携带签名,详情请参见 请求签名
微信小程序中,WebP 图片格式的兼容性较好:
Android 系统小程序:完全兼容;
IOS 系统小程序:需要 iOS 系统版本高于 7.0.6。
使用图片自适应压缩,可以满足您业务中大部分图片的压缩需求,但如果您担心用户设备太老,既不支持 AVIF 图片格式,也不支持 WebP 图片格式,想要进一步保证所有图片都能进行压缩,那么在使用图片自适应压缩功能的基础之上,推荐您使用数据万象的图片极智压缩功能。

更多:使用数据万象的图片极智压缩功能

数据万象提供的极智压缩能力,可以在不改变分辨率、不改变图片格式的情况下,对 JPG、PNG 格式的图片进行高效的压缩,大幅压缩图片的体积,且几乎不影响图片画质。
操作步骤如下:
1. 在控制台中开启 图片极智压缩 功能。
2. 当小程序上不支持图片自适应压缩的图片格式而返回了原图时,图片会自动进行极智压缩(无需其他操作)。
通过上述操作,即可基本保证在所有场景下都能让图片压缩,节省图片的访问流量。
注意
极智压缩相关限制说明,请参见 使用限制

费用相关

图片压缩费用,请参见 图片处理费用,其中 WebP 图片压缩属于基础图片处理费用、AVIF 图片压缩属于图片高级压缩费用。