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

7次阅读

共计 1430 个字符，预计需要花费 4 分钟才能阅读完成。

首先要问一个问题，加载这一张图片是不是达到了你谋求的成果？好的设计往往是谋求简略，放弃最好的性能。对于一个要加载很多资源的页面来说，如果能去掉一个图片资源，对性能的晋升是很直观的。当然，有的图片胜过一言半语，是否应用图片还是取决于你本人。

而后你要思考的是，现有的技术是不是能够用更高效的形式满足你的要求。

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

如果图片的确是必须的，你要好好思考用何种格局的图片。

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

每种格局的图片都有其特点。矢量图个别用于简略的几何图形，如 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 能够组合应用有损和无损压缩来缩小文件大小，能够尝试不同的品质压缩来抉择一个最小又最合适的。