前端性能优化 - 优化图片资源

页面性能优化是前端开发的重要环节，不论工作中还是应对面试都是必不可少的技能，性能优化不是某项单独技术，而是一项项细小调优的积累。从节省流量的角度出发，图片资源是流量开销最大的一块。本篇主要介绍针对资源图片一些优化方案。

图片格式选择（jpg、png）

jpg和png是目前最常用的位图格式

选取原则：

• 优先选择png格式，原因是不用考虑透明问题，其次png压缩比例往往更大
• 色彩更丰富且背景无透明效果的图片选用jpg，如产品图片、首屏banner、照片
• 相反，有透明背景需求只能使用png格式，另一个依据是色彩单一，如网站各种小图标，css sprite拼图
• 如果一张图拿不定主意存什么格式，那么两种格式都存，并且使用压缩网站压缩后对比大小，不要嫌麻烦，性能就是需要抠细节

使用WebP

webp一种web图片格式，资源小但兼容性受限，在Chrome上使用Webp可以节省至少50%的流量，使用方式可以参考（如何使用WebP）

合理的使用尺寸

• 这里的尺寸指的是img的width、height
• 原则是img尺寸 == css设置尺寸 || img尺寸x2 == css设置尺寸
• 这里的x2就是所谓的高清图，来应对手机屏幕和高清屏模糊的问题
• 一般网站图标、logo、用户头像尺寸都比较小，应该全部使用x2图
• 大尺寸的背景图，也可以使用高清图，一般公司都会有cdn服务，背景图更换几率并不大，而且一般都是在首屏的位置，或者想阐释一些有价值的内容，选择使用高清图会让网站看上去很舒服
• 产品列表中的产品图，视产品需求而定，可以考虑600px以内的图片仍然使用x2

使用svg