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

首先要问一个问题，加载这一张图片是否是达到了你追求的效果？好的设计每每是追求简单，保持最好的性能。对于一个要加载不少资源的页面来讲，若是能去掉一个图片资源，对性能的提高是很直观的。固然，有的图片赛过千言万语，是否使用图片仍是取决于你本身。

而后你要考虑的是，现有的技术是否是能够用更高效的方式知足你的要求。

• 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-ri...