2018.10.29 LOG:bmp gif jpg png svg webp responsive-images

图片格式浅析

重要概念

  • 有损 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:用字体来表现图标,速度快,没颜色

响应式图片

Elva dressed as a fairy

    
    Chris standing up holding his daughter Elva

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

你可能感兴趣的:(2018.10.29 LOG:bmp gif jpg png svg webp responsive-images)