优化方案
根据统计，用户打开网站，最满意的时间是1-2秒，如果超出了1-2秒，用户就会感觉卡顿，如果超过10秒以上，98%的用户会选择直接关闭这个网站，任何大于两秒的下载时间都将会使你的用户失去耐心，而现在网站中大部分的需要下载的资源都是image，那么优化image的加载速度就是重点部分，
错误格式的图片，或者是没有压缩的图片，还有就是图片太大的时候这些情况会极大地影响你的页面的初始化速度。
面对大小、格式、压缩等级等多样选择，到底应该从何处下手，PNG,JPG,SVG,内联的base64编码的字符串，webp等等到底有什么细节的区别？
随着硬件的进步，现代显示器，已经普遍达到了2k,4k的分辨率；越来越多的web页面运行在移动端，移动端的dip,dp,px,dpi,density等等概念又那么的令人容易误解,下面我们从硬件和逻辑像素入手逐一了解这些概念
硬件和逻辑像素
- 屏幕尺寸：屏幕的对角线的长度，电脑，电视，手机等等都是
- 屏幕比例：只确定了对角线的长度，2个边的长度还是无法确定，所以有了
4:3，16:9这种屏幕宽高比，这样就可以计算出屏幕的两个边长了 - 分辨率：纵横2个方向的像素点的数量，常见的取值有
480 x 800,320 x 480等 - dpi：dots per inch,直接来说就是一英寸的距离中有多少个像素点，常见的取值是120，160，240。又被称为像素密度
- density:像素密度因子，一平方英寸中含有的像素点数量
那么反映到电脑上，举个例子，13寸的MacBook Pro的屏幕图像宽度为1280px,但是retina屏的实际分辨率为2560 x 1600，这是为什么？因为其像素密度因子为2。
以前的显示器的像素密度因子为1，但是近年来屏幕分辨率的增加，硬件像素不再等于逻辑或CSS像素。
硬件像素和CSS像素之间的关系可由一下公式描述：
CSS像素 = 硬件像素 / 像素密度
因此，2560像素的硬件分辨率转换为retina屏上的1280个CSS像素。
现在，移动设备上像素密度因子有3，甚至4已经开始普及
Conclusion
图片优化从一下几个方面来思考：
- webp:webp格式的图片可以极大的缩小文件的体积，可以大幅度缩小网络传输时间
- 懒加载:首先加载首屏内的图片，其他的部分可以做
预加载或者滚动到了再加载的懒加载,注意使用passive event listeners和节流技术来优化scroll事件的频繁触发 - placeholder:先加载一个很小的
blur-up的图片作为占位符，让用户首先感知到这里是一张图片，然后加载大的图片，大图片加载完成之后使用过度的动画效果，隐藏占位图，显示大图 - 响应式：使用响应式图片(图片格式，大小，分辨率)，在不同的终端，不同的像素密度因子的屏幕上，显示最合适的图片，可以很明显的节约我们的网络加载时间