前端性能优化-图片优化技巧

在网页的浏览过程中，图片的展示无疑对用户的使用体验有很大的影响。画质、加载速度，是两个非常重要的点。

毫无疑问，画质越清晰，一般图片的大小就越大，所以这两者有一些关联。但我们可以从这两个角度考虑，来使用一些优化手段。

01 画质

首先我们要考虑图片的用途，并通过用途来决定要使用哪一种格式的图片。不同的图片有其自身的特性。

• .png，它支持透明背景，一般用来做图标、徽标等，一般采用的是无损压缩，相对来说要大一些；
  

• .jpg通常用于显示照片，具有较高的压缩比率和丰富的颜色呈现；
  

• .webp支持无损压缩和有损压缩，一般来说，较低的质量丢失就可以大幅减少图片的大小，非常适合用在网页中。
  

• svg图片，即矢量图，可缩放不失真，适合图标和简单的图片。

除了考虑用途，还要考虑图片类型的浏览器兼容性。

进一步的，我们可以根据屏幕的大小来决定要使用哪一种类型的图片，做一些响应式层面的优化。

02 加载速度

除了图片的大小，我们还可以采用一些技术手段来提高加载速度，或者说在用户感知层面的加载提速。

• 延迟加载是一种很有意思的做法，即当图片出现在视窗时才进行加载，以减少初始网页网页转圈圈的时间，通常需要配合预加载进行使用。
  

• 使用css sprites，即将网页不同位置的会用到的图片进行拼接，然后用css进行局部展示，以达到减少图片下载次数的目的；
  

• 预加载，即在图片即将进入视窗时进行加载，一般和延迟加载配合使用。
  

• 使用图片CDN，CDN服务器一般会离用户更近些，可以减少网络io的时间。

网页中图片的优化除了上述内容，还有很多其它的方法。欢迎留言，说说你的想法。

原文始发于微信公众号（架构师手札）：前端性能优化-图片优化技巧