前端优化（图片优化）

图片优化——质量和性能的平衡点

为啥要作图片优化？

图片是界面显示效果很重要的组成部分，图片加载关系到用户体验、应用性能。对于页面来讲速度影响着最大的就是图片，一张普通的图片能够达到4-5M的大小，而代码压缩也就只有几十KB。若是一个页面加载几秒没有完成，用户体验很差，会丧失不少用户的。

常见优化大概如下几点：

1. 压缩
2. 懒加载  + 节流优化
   
3. CDN/OSS 七牛、阿里云、腾讯云基本都有（cdn遵循就近原则，且能称得上CDN的速度确定较快。）
4. css 预加载 / js 预加载
5. css Sprites 精灵图/雪碧图

针对图片太多或者太大：将图片服务和应用服务分离

    对于服务器来讲,图片始终是最消耗系统资源的,若是将图片服务和应用服务放在同一服务器的话,应用服务器很容易会由于图片的高I/O负载而崩溃,因此当网站存在大量的图片读写操做时,建议使用图片服务器.

懒加载

懒加载解释：

  对于图片过多的页面，为了加速页面加载速度，不少时候咱们须要将页面内未出现的可视区域内的图片先不加载，等到滚动到可视区的时候录再去加载。这样子对于页面加载性能上会有很大的提高，也就提升了用户体验。称之为懒加载

网友提供的一张图，很简洁的说明了懒加载，如何判断图片进入可视区域是关键。

lazyload（vue、react、js、jquery都有提供）插件

图片格式

关于web图片格式：JPEG/JPG、PNG、WEBP、Base6四、SVG

JPEG/JPG：特色是有损压缩，体积小，加载快，不支持透明。

PNG-8和PNG-24：无损压缩、质量高、体积大、支持透明

SVG：文本文件，体积小，不失真，兼容性好。

base64：文本文件、依赖编码、小图标解决方案

一张图片知足如下条件时 能够大胆的使用Base64编码：
一、图片很小
二、图片没法像雪碧图同样和其余小图标结合（雪碧图是主要的减小HTTP请求途径）
三、图片更新频率低（不须要重复编码和修改文件内容，维护成本很低）

WEBP：2010年被提出，是Google专为WEB开发的一种旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩。WEBP受到最大的限制就是浏览器的兼容性。

js图片延迟加载和指定图片优先加载的一中实现方式