①简单说一下常用的几种图片格式：
1、JPEG：
优点：a、利用有损压缩来保持文件较小；
b、它能够轻松地处理16.8M颜色，可以很好地再现全彩色的图像；
c、在对图像的压缩处理过程中，该图像格式可以允许自由地在最小文件尺寸（最低图像质量）和最大文件尺寸（最高图像质量）之间选择；
缺点：a、压缩时，图像的质量会受到损失；
2、PNG：
优点：a、支持透明效果；
b、采用无损压缩；
c、在对图像的压缩处理过程中，该图像格式可以允许自由地在最小文件尺寸（最低图像质量）和最大文件尺寸（最高图像质量）之间选择；
缺点：a、比起 jpeg 尺寸较大；
3、WEBP：
优点：a、相较于 jpeg，png，尺寸更小；
缺点：a、相较于 jpeg，png，尺寸更小；
②渐进式/交错式图片：
对于 jpeg，可以存储为连续模式，png 可以存储为交错模式，统称为渐进式图片。渐进式图片渲染方式是先出现一个大体的轮廓，然后逐渐丰富细节，但同时也会耗费 cpu，gpu；
③酷炫的加载图片：
1、背景色过渡：
像 google 的图片加载，是以背景色占位，然后等图片加载完毕展示图片，这种方式比较简单直接，用 css 就可以满足；如果你想提取图片的主色调，你可以借助工具 color-thief，想简单处理，就把图片缩小到 1px，用浏览器的颜色拾取器拾取，或者用代码；
2、LQIP(低质量图像占位符)：
可以使用 lqip，或者 lqip-loader，imagecompressor 等工具来生成缩略图，初始展示一个具有模糊效果的缩略图，让用户知道轮廓，然后等原图加载完毕替换，因为有模糊效果，我们的缩略图是可以不考虑质量的，所以可以尽可能的小；
3、SQIP(一种基于 SVG 的 LQIP 技术)：
sqip 可以根据你的需要生成 svg 轮廓，因为 svg 是矢量的，也非常适合用作背景图像或者横幅图，而且 css 和 js 都可以很好的操作 svg，为我们留出了很多的可能性；
4、剪影：
可以通过 node-potrace，image-trace-loader 等工具来生成 svg 剪影；
5、渐进式 svg：
首先我们需要一个提取图片轮廓的算法，例如 CannyJS，canny-edge-detection，然后我们需要根据轮廓分出每一个连线，最后得出的结果就是多个连线，然后创建 svg 中的 polyline 矢量元素，把连线路径赋予 polyline，写一个 strokeOffset 动画；
（参考：mp.weixin.qq.com/s/Tzbn_aKEW…
