web|页面加载性能之选择正确的图片格式性能优化|前端

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

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

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

文章图片

【web|页面加载性能之选择正确的图片格式】左图是矢量图，右图是光栅图。

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

每种格式的图片都有其特点。矢量图一般用于简单的几何图形，如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的实际应用。
在使用老的图片格式的时候，有以下几点要考虑：

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