图片优化

图片是大多数网站的页面总体积占比最大的资源，优化图片毫无争议的成为了改进页面加载速度的最佳切入点

1 .平衡每张图文件的大小和质量
2 .找到减小网站中图片请求总数的方法
3 .优化网站图片的创作流程以改进性能

图片格式的选取-思考

1 .在不对质量造成明显影响的情况下，可以对图片压缩到什么程度
2 .需要多少种颜色
3 .需要透明么
4 .需要动画么
5 .这个图片显示时最大的宽和高是多少
6 .这张图片在网站中的复用性是如何

各种图片格式的介绍

jpeg

1 .图片含有其他大量颜色的理想格式，支持渐进式输出，降噪
2 .通过多种途径的压缩，而不会出现视觉上可感知的明显的质量损失。
3 .在有损压缩的情况下可能会出现明显的压缩修饰痕迹。
4 .jpeg善于丢弃处于平滑渐变和低对比度区域的信息，相邻像素差异较大的图片，可以采用png格式
5 .jpeg图像中不同颜色越多，文件的体积越大，噪点和纹理也会显著的增加文件的体积
6 .选择jpeg类型可以影响网站载入速度的感知性能，基线jpeg文件是全分辩率的图片，由对图片从顶部至底部的扫描所组成，所以在浏览器中是一行行的逐渐显示出来，一开始以低清晰度形式马上显示出来，然后逐渐变得更加清晰。
7 .cpu使用率：渐进式jpeg每次扫描所需要的CPU电力，差不多是渲染一次完整基线JPEG所考虑的量，对于移动设备来说可能是个不好的消息

GIF

1 .起源于1987年，支持动画和透明度，每帧只有256色，是一种无损格式文件
2 .当动画不能用CSS代替的时候。
3 .同样的输出为GIF的时候比PNG-8体积小。
4 .gif图片的大小受到抖动量的影响。
5 .垂直噪点也会影响文件大小

PNG

1 .为了弥补GIF格式创造的无损格式。
2 .当图片需要透明的时候，PNG是最合适的格式。
3 .当图像中颜色数量较少的时候，png8可能是最合适的选择，png8最多支持256种颜色，并且文件体积较小
4 .png24文件在颜色数目上没有限制，同以上两种文件一样，减少噪点和颜色的数量会从整体上减少文件的体积

webP格式

1 .相比jpeg，可以把图片缩小40%。

额外的压缩

1 .确报导出的图片在你需要的最大范围以内
2 .导出图片之后，可以使用imageOptim之类的软件，找出不同文件格式的合理压缩策略,这些工具可以在不损失质量的前提下，大大减小图片文件的体积
3 .如果可能，将这个工作流程自动化。
4 .使用工具和算法优化图片：及时使用了高效的图片格式也需要后续的处理和优化，减少噪点。

替换图片请求

1 .除了减小图片体积以外，还可以通过减少图片的请求数量来优化页面加载。
2 .使用图片精灵:网页设计中那些较小，重复的图片。只需要一次http连接就可以实现。http2.0的时代这个可能会被淘汰。
3 .用css3:重复渐变，loading，但是要注意页面重绘现象
4 .data URL：用base64编码的方法将图像转为纯文本，将其变为一个url.
5 .SVG：替换图标，如果图片是纯色，单色，渐变，或者很少的细节。无论设备是否支持视网膜，都可以很好地显示，是一种优雅的可缩放的图像

图片使用规划和改进

1 .建立日常检查机制来确定哪些图片可以被复用，合并，或者导出成其他格式。
2 .同样的，对于网站的页面体积也可以进行日常的检查，注意页面体积的组成，包括图片的占比，如果页面的体积发生了显著的增长，找到原因，并对文件体积进行优化
3 .创建样式指南：可作为网站图片创作的参考，特别是对图标的含义或者精灵图的使用来说。
4 .指导其他的图片创作者

响应式图片

1 .picture元素
2 .srcset属性

使用图片cdn

1 .所有的资源都可以从CDN资源中受益。但是一些特定的工具是专门针对图片的。
2 .图片占整个页面的60-80%

图片自动优化平台

1 .