图片基础知识
1. 矢量图与位图
矢量图
矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。
一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。
用途：SVG，图标字体font-awesome
位图
位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。
位图的优点是利于显示色彩层次丰富的写实图像。
缺点则是文件大小较大，放大和缩小图像会失真。
用途：png,gif,jpg,canvas
2. 有损压缩和无损压缩
有损压缩
有损压缩是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附件的颜色通过渐变或其他形式进行填充。
优点是：能大大降低图像信息的数据量，又不会影响图片的还原效果。
用途：JPG
注意：压缩的的品质一般在60-80之间，60以下图片失真会很严重。
无损压缩
无损压缩是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，而把不同的数据另外保存。
用途：PNG
注意：无损压缩只是一种相对的说法，图片还是会失真的。例如PNG8只能索引256中颜色，所以图像上出现的颜色数量大于我们可以保存的数量时，就不能真实地记录和还原图像了。
3. 透明度
索引透明
即布尔透明，类似于GIF，某一个像素只有全透和全不透明两者效果，不能对透明度进行设置。
Alpha透明
半透明
4. 图片优化基础知识
- 图片大小与展示区一致
- GIF转为PNG8
- 缩略图（大图片，先加载一张缩略图）
在后续还有图片的加载优化，采取新的图片格式webp