1.常见的图片优化

（1）压缩
（2）使用<picture>[<img srcset>]响应地根据屏幕大小使用不同的图片，调整其大小以降低图像解码成本。

2. 光栅图像与矢量图

2.1 光栅图像（也叫位图、点阵图、像素图）：

是一组称为像素的点，每个像素都是一个很小的彩色方块，
常见的有JPEG 、GIF、JPG、BMP；
缩放时会失真；
适合存储图形不规则，而且颜色丰富没有规律的图，比如照相、扫描。

2.2 矢量图像

生成对象的连接线和曲线的集合；
图像可以无限级缩放，对图形进行缩放，旋转或变形操作时，图形不会产生锯齿效果；
常见的有SVG

3. JPEG

3.1 使用最广泛的图像格式: 在HTTP存档抓取的网站上看到的图像中,有45％是JPEG
3.2 JPEG是一种有损压缩算法，会丢弃信息以节省空间，并且在保留视觉高保真度同时将文件尺寸尽可能小
3.3 JPEG的压缩模式：
（1）基线JPEG:
以相对简单的方式进行编码和解码，高质量，压缩率小，load from top-to-bottom
（2）渐进式JPEG:
load from low-quality to high quality，适用于大图

4. WebP

WebP是Google的最新图像格式，旨在以可接受的视觉质量,提供较小的文件，以实现无损和有损压缩。它也支持Alpha通道透明度和动画；
在低质量范围（0-50）中，WebP与JPEG相比具有很大的优势，因为它可以消除丑陋的块状伪像；
在较高范围（80-99）中，WebP的优势会缩小；
safari和IE都未支持