前端性能优化 - 图像处理

1,612 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第7天,点击查看活动详情

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、图片预加载和懒加载