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

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

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

• CSS效果（如阴影、渐变），以及CSS动画，是否可以创造出你想要的效果，用以取代图片。优点是：放大无损，体积小。
• 自定义字体 可以让你使用一些很漂亮的字体，同时还能支持选中、搜索、改变字体大小，可用性更高。

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

选择正确的图片格式

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

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

• 矢量图 用线条、点、多边形绘制的图形
• 光栅图 用一个个像素点拼接起来的图片

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

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

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

什么是高分屏？

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

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

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

屏幕分辨率	像素点个数	未压缩的文件大小
1x	100 * 100 = 10000	40000
2x	100 * 100 * 4 = 40000	160000
3x	100 * 100 * 9 = 90000	360000

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

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

• 尽可能使用矢量图，只要能做到的情况
• 如果实在是需要使用光栅图，则使用响应式的图片（待后续文章），针对不同分辨率应用不同尺寸

不同类型的光栅图的特点

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

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

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

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

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

总结

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

参考

https://web.dev/choose-the-right-image-format/