很多兄弟都认为图片这东西只要好看就行了，大小和格式那是太讲究了。其实不然。你可信一个小小的图片有的时候甚至比所有的CSS和JS文件加起来还要大。对图片进行必要的优化，可以显著的提高页面加载速度。关键是这几乎是没有技术风险的。
条件允许下，尽量使用矢量图
目前，所有的图片都可以归为两种格式，一种是矢量图片，一种是位图（也叫像素图）。
我们常见的图片都是位图。例如：jpg,png,gif等。其实照片也是位图。只不过是物理位图。位图很直观，图中的每个点都有对应的数据。当然了，这个说法也不严谨，毕竟现在有各种魔改位图，把近似点的数据都整合了。这就是常说的图片压缩技术。
矢量图比较有技术含量。它用线条、形状来描绘图形。例如：正方形，圆形，椭圆形。当然，实际情况远比这个复杂的多。但归根结底，它用几何图形而不是像素点来描述图形。因此呢，矢量图有非常牛掰的属性，第一它非常非常小，第二无论如何放大都不会模糊。
左边的矢量图放大2.5倍还很清楚，而右边的位图放大2.5倍之后已经开始模糊。
矢量图虽好，但也有显著的缺点。在表达复杂图形时（例如照片），矢量图就力不从心了。虽然理论上照片确实也可以用多边形描述，但即使成功了，也不比用位图直接表示小多少。
所以，根据图形的内容，选择是否使用矢量图会非常显著的降低图片的大小。能用矢量图，一定要用。常见的矢量图的格式时SVG的。起飞页和虎翼都支持SVG。甚至还支持对SVG的动态改色。很酷的。
条件不允许，尽量使用webp
Webp的Google公司推动的一个新型的图片格式。其实说起来，也有10年的历史了。但对比其它老爷级的图片格式，还是算新面孔。WEBP采用了基于分块和预测的压缩算法，可以在几乎不影响图片质量的前提下，大幅减少图片的大小。
在不影响图片质量的前提下，使用webp，在一个典型的网页中，可以减少至少20%以上的图片大小，有时甚至可以减少80%。
早在2019年，起飞页和虎翼就可以支持将所有图片都转成webp格式，甚至还可以设置webp的压缩率。这个技术在实际使用中，至少提高了20%以上的页面加载速度。