2019-11-27总结图片优化：怎样让图片加载得更快
一.图片压缩
1.压缩png
1)node-pngquant-native
2)跨平台，压缩比高，压缩png24非常好
2.压缩jpg
1)jpegtran
2)图片尺寸随着网络环境变化
二.不同网络环境下，加载不同的图片
三.响应式图片
1.javascript 绑定时间检测窗口大小
2.css媒体查询
@media screen and (max-width:640px){ my_image{width:640px;}}
3.img标签属性
<img srcset="img-320w.jpg,img-640w.jpg 2x,img-960w.jpg 3x"scr="img-960w.jpg" alt="img" >
三.逐步加载图像
1.使用同一占位符
2.使用LQIP
3.使用SQIP
四.真的图片吗？
1.web font 代替图片
2.使用data URI代替图片
3 .采用Image spriting （雪碧图） 请求数就只有一个展开 7
2019-11-27图片环境随网络环境变化具体是怎么实现得呀？ 1 4
2019-12-11老师有个口头禅…对…作者回复: 被您发现了 :)
1
2019-11-29jdf-png-native包支持的不是太好，会有'Can\'t load the addon. Issue to: ' + bugUrl的错误 2 1
2020-02-09写文件时传的配置参数 flags: 'wb' 是什么意思呢？
2020-01-07根据不同的网络显示不同的图片，这个不同的网络是通过什么来判断的呢，如果是navigator的话兼容性会不会很不友好？作者回复: 网络状态一般是通过APP取，通过JSSDK暴露给JS使用；原生JS中navigator.connection方法判断网络状态兼容性很不好的（具体浏览器支持情况可以参考https://caniuse.com/#feat=netinfo）
2020-01-03png用tinypng不行吗作者回复: 个别图片用tinypng是可以，它的压缩算话毕竟很优秀。大批量业务，以及对图片隐私考虑（需要上传到它服务器上），此时显然tinypng就不太合适了。
2019-12-30node-pngquant-native 安装不成功，无法压缩，老师能不能把配置环境讲详细一点作者回复: 您可以试试 jdf-png-native ，具体实例参考咱课程demo https://github.com/putaoshu/geek-fepo-course/tree/master/example/2.2node-pngquant-native
2019-12-11老师 雪碧图的方式 是不是不太适应http2.0了作者回复: 您说的非常对，HTTP/2支持多路复用，允许通过一个HTTP/2连接发起多个请求，所以说呢优化也是相对而言的。另外呢，HTTP/2相关知识点我们会在第5章服务端和⽹络优化具体讲解。
2019-12-11node-pngquant-native 这个也没法install 下来··作者回复: 您好 node-pngquant-native可能不支持您的node版本，请尝试在低版本node上安装，或者使用已对node-pngquant-native编译好的jdf-png-native模块。
2019-11-30有没有图片逐步加载代码的demo，怎么就知道图片加载好了，然后隐去低质量图片，将高质量图片渲染 1
2019-11-27看到lqip取base64的图片，我突然想到了一个场景，不知道可不可以用，图片后面有一个虚化的背景图片，以前有用过css滤镜实现，不知道老师说的Lqip用在这种场景是否可行？ 1
2019-11-27老师您好，什么场景下比较适合使用iqip/sqip这种方式 1
2019-11-27老师您好，怎么判断使用这个逐步加载图片。就是怎么判断图片加载完了？ 2