背景

活动中使用了很多图片资源，而设计师在蓝湖上上传的图片都为png图片，每一张的图片资源即使压缩了图片质量依旧很大。大大影响了活动渲染的速度。

目标

减少图片质量，加快渲染速度。

调研

h5上能渲染的图片主流的有png,jpg(jpeg),webp,svg。

1. png 支持透明通道
2. jpg 不支持透明通道，但是质量比png小。
3. webp 支持透明通道，质量比jpg小，但兼容性差。不支持小于ios14.4的版本。

方案

一、没有透明通道的png图片转成jpg图片。

ui给的所有图片都是png，前端同学可以将图片中没有透明通道的png图片转成jpg图片，从而达到图片质量减少的效果。

二、图片压缩

将所有的png和jpg图片多生成一份对应的webp图片，然后对他们进行压缩。

三、使用picture

使用picture(官方说明)标签，它能够帮助我们做到降级处理。

<picture>
      <source srcset="@/static/img/555.webp"  type="image/webp"/>
      <img src="@/static/img/555.png" alt="" />
</picture>

如果设备不支持webp标签，则只请求png标签。