2018.10.29 LOG：bmp gif jpg png s

图片格式浅析

重要概念

• 有损 vs 无损
  有损压缩。指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，无损与之对应相反。
• 索引色vs直接色
  索引色，用一个数字来代表（索引）一种颜色，在存储图片的时候，存储一个数字的组合，同时存储数字到图片颜色的映射。这种方式只能存储有限种颜色，通常是256种颜色。
  直接色，使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。
• 点阵图vs矢量图
  点阵图，也叫做位图，像素图。构成点阵图的最小单位是象素，点阵图缩放会失真，用最近非常流行的沙画来比喻最恰当不过。
  矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，即使对画面进行倍数相当大的缩放，其显示效果仍然相同(不失真)。

1. bmp 无损的、既支持索引色也支持直接色的、点阵图，太大，弃用
2. gif：无损的、采用索引色的、点阵图，适用于对色彩要求不高同时需要文件体积较小的场景，比如Logo、线框类图等
3. jpg：有损的、采用直接色的、点阵图，采用了直接色，得益于更丰富的色彩，适合用来存储照片
4. png-8：无损的，索引色的、点阵图，更小的体积，尽可能的使用png-8而不是gif
5. png-24：无损的、直接色的、点阵图，体积大，只有在不注重图片大小时使用
6. svg：无损的、矢量图，矢量图，渲染速度慢，可做响应式设计
7. webp：有损和无损、直接色、点阵图，谷歌研发的图像格式，相同质量的图片，WebP具有更小的文件体积，现在只有chrome，edge，opra支持
8. iconfont：用字体来表现图标，速度快，没颜色

响应式图片

<img 
srcset="originals/firefox_logo_120.png 120w,originals/firefox_logo_400.png 400w,originals/firefox_logo.png 1200w"
sizes="(max-width: 480px) 120px,400px" 
src="originals/firefox_logo.png" alt="Elva dressed as a fairy">

<picture>
    <source media="(max-width: 600px)" srcset="originals/red-panda-600.png">
    <img src="originals/red-panda-1200.png" alt="Chris standing up holding his daughter Elva">
</picture>

1. 裁剪好各种宽度的图片
2. 将图片路径放入srcset
3. sizes指定不同宽度时使用的图片宽度，匹配大小最近的图片
4. picture是一样的道理