05资源优化-02图片格式优化

1. 图片优化的方案

1.1 选择正确的格式

根据实际的使用方式选择正确的格式。

1.2 选择接近的图片尺寸

比如：页面需要一个500*500px的图片，那么就给他一个这么大的图片。
常见情况：不同的终端显示同一张图片，此时最好就是给他们不同尺寸大小的图片来适配对应终端。

1.3 图片压缩

图片的压缩要慎重，因为图片进行压缩后会对图片的质量产生较大影响。请平衡好质量和大小。

1.4 根据优先级进行加载(其他资源也同理)

重要的图片先加载，不重要的后面加载（懒加载）。

1.5 利用相关的工具

工欲善其事必先利其器；有好用的工具就别自己费力气。

1.6 图片格式比较

1.6.1 JPEG/JPG

优点：
高压缩比且图片色彩保存也比较好。

缺点：
因为压缩比很高，如果比较强调纹理或者边缘，jpg就会出现锯齿或者模糊。

常用场景：
首页banner、轮播图

推荐工具:imagemin-jpegtran

1.6.2 PNG

优点：
可以做透明图片；
补充JPG的缺点，可以很好的处理边缘或纹理。

缺点：
体积较大。

常用：
小图片，如logo

推荐工具：imagemin-pngquant

1.6.3 webp

JPEG、PNG以及GIF这些格式的图片已经没有太大的优化空间。但是，Google推出的WebP图片格式给图片优化提供了另一种可能;
WebP是一种支持有损压缩和无损压缩的图片文件格式，根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积

webp详细

webp相关文章