前端性能优化 - 图像处理

1、使用PS存储为web格式

对比jpg和png的特点，不同的图像使用不同的格式能得到最佳压缩效果。
1.1对处理好的图片选择文件-存储为web所用格式
1.2在预设中调整降低图片质量
比如，PNG-24调整为PNG-8看差异是否明显
1.3调整大小百分比
百分比放大，比如调到200%，适用于在上一步预设中降低了图片质量后，导致在100%的情况下图片有不清晰等差异，可尝试放大到200%，同时需要控制左下角图片大小，应不超过未调整前的，不然还费力调整啥呢。
百分比减小，比如调到50%，适用于在页面展示时，图片大小较小，且正常情况不会对图片进行缩放查看细节。
点击应用按钮后，可查看图片效果预览和左下角的图片大小。

1.4点击右上角的储存即可

2、PPDuck3压缩图片

使用PPDuck3压缩图片大小，使用对比工具，查看压缩前后图片差异（肉眼几乎看不出）就可以了。

3、其他暂时未用到的方法

3.1、如果不考虑兼容性，可以选择工具转换成webp格式。
3.2、雪碧图css sprite，把网页中一些背景图片整合到一张图片文件中，再利用 CSS 的 “background-image”，“background- repeat”，“background-position” 的组合进行背景定位。
3.3、使用base64表示简单的图片
3.4、图片预加载和懒加载