前端性能优化 - 图像处理

1、使用PS存储为web格式

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

2、PPDuck3压缩图片

使用PPDuck3压缩图片大小,使用对比工具,查看压缩前后图片差异(肉眼几乎看不出)就可以了。
前端性能优化 - 图像处理_第2张图片

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

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

你可能感兴趣的:(performance)