为啥要做图片优化？
图片是界面显示效果很重要的组成部分，图片加载关系到用户体验、应用性能。对于页面来说速度影响着最大的就是图片，一张普通的图片可以达到4-5M的大小，而代码压缩也就只有几十KB。如果一个页面加载几秒没有完成，用户体验不好，会丧失很多用户的。
常见优化大概以下几点：
- 压缩
- 懒加载 + 节流优化
- CDN/OSS 七牛、阿里云、腾讯云基本都有（cdn遵循就近原则，且能称得上CDN的速度肯定较快。）
- css 预加载 / js 预加载
- css Sprites 精灵图/雪碧图
针对图片太多或者太大：将图片服务和应用服务分离
对于服务器来说,图片始终是最消耗系统资源的,如果将图片服务和应用服务放在同一服务器的话,应用服务器很容易会因为图片的高I/O负载而崩溃,所以当网站存在大量的图片读写操作时,建议使用图片服务器.
懒加载
懒加载解释：
对于图片过多的页面，为了加速页面加载速度，很多时候我们需要将页面内未出现的可视区域内的图片先不加载，等到滚动到可视区的时候录再去加载。这样子对于页面加载性能上会有很大的提升，也就提高了用户体验。称之为懒加载
网友提供的一张图，很简洁的说明了懒加载，如何判断图片进入可视区域是关键。
lazyload（vue、react、js、jquery都有提供）插件
图片格式
关于web图片格式：JPEG/JPG、PNG、WEBP、Base64、SVG
JPEG/JPG：特点是有损压缩，体积小，加载快，不支持透明。
PNG-8和PNG-24：无损压缩、质量高、体积大、支持透明
SVG：文本文件，体积小，不失真，兼容性好。
base64：文本文件、依赖编码、小图标解决方案
一张图片满足以下条件时 可以大胆的使用Base64编码：
1、图片很小
2、图片无法像雪碧图一样和其他小图标结合（雪碧图是主要的减少HTTP请求途径）
3、图片更新频率低（不需要重复编码和修改文件内容，维护成本很低）
WEBP：2010年被提出，是Google专为WEB开发的一种旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩。WEBP受到最大的限制就是浏览器的兼容性。
