前端性能优化-图片

前端性能优化的目的:

1. 从用户角度而言: 优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。
2. 从服务商角度而言: 优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

我们先了解图片大小的计算：

对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 * 1 * 4 / 1024）。

但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。

了解了如何计算图片大小的知识，那么对于如何优化图片，想必大家已经有 2 个思路了：

• 减少像素点
• 减少每个像素点能够显示的颜色

针对图片优化，与其说是优化不如说是在‘权衡’。我们平常图片优化都是压缩图片或是选择体积较小的图片格式，这个压缩过程是以牺牲图片质量为代价的，就会导致页面显示时图片失真。因此我们应该尽量寻找一个在质量和性能之间的平衡点。

优化图片大小

图片压缩工具

• 这里主推两个小工具：
  1. TinyPNG:网称压缩PNG的神站 （支持png和jpg）;
  2. 智图 （支持png,jpg,webp），可大大降低图片的大小

优化图片加载

• 不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。

• 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。

• 小图使用 base64 格式

• 将多个图标文件整合到一张图片中（雪碧图）

• 选择正确的图片格式：

• 对于能够显示 WebP格式的浏览器尽量使用 WebP 格式。因为 WebP
  格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好

• 小图使用PNG，其实对于大部分图标这类图片，完全可以使用 SVG代替

• 照片使用 JPEG

CSS Sprites（雪碧图/精灵图）

• 在线工具：CSS Sprites
• 超好用，不用麻烦UI去设计了，还可选择图片排列顺序，重点是可以直接生成代码，不用再去手动测量了，很方便。

字体图标 （iconfont）

• 为 Bootstrap而创造的图标字体：font-awesome
• 阿里巴巴矢量图标库：iconfont

图片懒加载(lazyload.js)

有个页面会很大很长很多的图片素材，这样全部加载就会变的很慢，因此需要修改一下加载方案，只加载窗口内的图片，我们大家浏览网站的时候会经常看到会有默认图，图片加载成功之后会替换默认图比如常用的lazyload.js用于图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的。

• 能有效的提高页面加载速度
• 有时候可以帮助减少服务器负载