背景

在前端性能优化中，图片资源占比很大，选择正确的图片格式，对性能优化的作用很大，能有效优化FCP和LCP指标；并且对压缩算法也有不同程度的影响。

图片格式

JPG

有损压缩的图片格式，适用于照片类图片；压缩时可以调整压缩率来减小图片体积，但是可能会影响视觉质量。

png

无损压缩的图片格式，支持透明通道，适用于图片、网页元素、截图等； 因为是无损压缩，所以压缩效果可能不会很理想。但是由于无损图片质量就会高一些。

gif

支持自动播放的动态图片，但是颜色深度有限。 图片体积太大，应该尽量避免。可以考虑WebP或者APNG格式来替代。

svg

矢量图，放大不失真。适用于简单的图形、图标、标志等。 本质是一种标记语言，能由浏览器来解析。

使用时可以对svg文件清理，去掉多余的元数据、注释和空格，以此减小图片体积。

webp

支持有损、无损压缩，适用于Web。比jpg、png等格式有更高的压缩率，同时也支持透明通道。

avif

支持有损、无损压缩，适用于图像内容复杂的场景。

图片压缩

压缩的本质就是减少重复部分，不同图片格式压缩算法的表现是不同的。

1. 对于小图标尽量使用svg，并且对svg文件进行简化处理，去掉不必要的信息
2. 尽量使用webp和avif来替代jpg和png。
3. 避免使用png，因为是无损压缩，图片体积太大，除非是对图片质量要求高的场景。
4. 避免使用gif，体积太大
5. 项目构建时，需要对图片进行压缩，以减小文件体积。