页面加载性能之选择正确的图片格式

首先要问一个问题，加载这一张图片是不是达到了你追求的效果？好的设计往往是追求简单，保持最好的性能。对于一个要加载很多资源的页面来说，如果能去掉一个图片资源，对性能的提升是很直观的。当然，有的图片胜过千言万语，是否使用图片还是取决于你自己。

然后你要考虑的是，现有的技术是不是可以用更高效的方式满足你的要求。

如果你发现你的图片内包含文本，请好好考虑下用户体验，不能搜索，不能选中，也不能放大，对于高分屏，更是难兼容。自定义字体可以很好地帮你解决这类问题。

选择正确的图片格式

如果图片确实是必须的，你要好好考虑用何种格式的图片。

左图是矢量图，右图是光栅图。

每种格式的图片都有其特点。矢量图一般用于简单的几何图形，如logo、文本和图标，优势是高清、缩放无损、体积小。

当图片的形状趋于复杂，如照片，你用大量的svg标签堆砌出来，看上去也不真实，矢量图的局限性就在这。这时可以考虑一下光栅图，如png、jpg或者webp。

光栅图的缺点也很明显：缩放模糊、体积过大、针对不同分辨率需要提供不同的尺寸。

像素点分为两类：CSS像素和设备像素。一个CSS像素一般对应一个设备像素，也可能对应多个像素。设备像素越多，看上去更细腻，给用户的感觉是不一样的。

高DPI屏幕虽然展示的更好，但却需要提供的图片尺寸也更大。在这点上，矢量图占优，但矢量图的制作成本也相对较高。

由于光栅图是基于像素的，也意味着图片尺寸越大，文件大小越大，如下表：

这不是直线增长，而是平方的增长。

有以下两种方式可以优化：

格式	透明度	动画	浏览器支持
PNG	是	否	所有
JPEG	否	否	所有
WebP	是	是	所有现代浏览器

png和jpeg是两个比较传统的图片格式，应用广泛，现代浏览器有一种新的格式webp，拥有更高的压缩比，提供了更丰富的支持。

后续会单独一篇文章来讲述webp的实际应用。

在使用老的图片格式的时候，有以下几点要考虑：

是否需要动画？用 video 标签替。
- 为什么不用 gif ？gif 只有最高256位色，实现同样的动画，比video要大得多。
是否想在高分屏上保留细节？使用 png。
- png 不支持任何有损压缩，能保持最高质量，但同样的体积会更大，视情况而用。
- 如果图片是一系列多边形的组合，考虑用 svg 。
- 如果图片上包含文本，考虑使用自定义字体。
如果你展示的是照片、截图或者类似的图片？使用 jpeg 。
- jpeg 可以组合使用有损和无损压缩来减少文件大小，可以尝试不同的质量压缩来选择一个最小又最合适的。

如果你是在webview中使用图片，尽可能的选择webp。Facebook以及其他大厂在app和服务器之间的图片传输上，都会选择webp，可以节省很大一笔开销，存储成本和带宽成本。