png,jpg,svg的区别

png,jpg,svg的区别

  1. 位图:点阵图(像素图),由电脑上屏幕上的发光(像素)的构成,如jpg.png,gif等
  2. 矢量图:向量图,由一系列计算机指令来描述和记录一幅画,因为生成的矢量图文件存储量很小,适合文字设计和图案设计等,如svg等
  3. 无损压缩:对文件本身的压缩,使图片占用的存储空间变小,并且不会损坏图片的质量,如png等;
  4. 有损压缩:对图像本身的改变,会对图片质量造成损害,随着压缩次数越来越多,图片质量会越来越差,如jpg等;如果要减少图像占用内存的容量,就必须使用有损压缩方法,(删除人类不敏感的信息,无法复原)
    Png-8:它有2^8中颜色,即256种颜色
    Png-24:它有2^24中颜色,即1600万种颜色
    1.jpg(jpeg):有损压缩、体积小、加载快、不支持透明,不支持动画;使用场景:大的背景图,轮播图,Banner图
    2.png:无损压缩、质量高、体积大、支持透明,不支持动画;有png-8,png-24.使用场景:(1)小的Logo,颜色简单且对比强烈的图片或者背景(2)颜色简单,对比度强的透明小图
    3.Gif:支持动画,支持透明背景图像,适用于多种操作系统,体积很小,压缩率50%左右使用场景:动图
    4.svg:文本文件,体积小,不失真,兼容性好,可缩放的矢量图SVG 格式的图片可以任意放大图形显示,并且不会损失图片质量;SVG 格式可编辑和可搜寻;SVG 格式平均来讲,比 JPG 和 GIF 格式文件要小,并且下载也比较快。SVG 文件通常是极小的,但是当图形的复杂度变高的时候,SVG 文件大小会随之上升,因为 SVG 在渲染的时候需要比像素图更多的计算能力,这也意味着性能的损耗。所以在 Logo 等图上,应尽可能简洁。使用场景:(1)SVG loading 效果图:SVG-Loaders(2)转换工具:在线 JPG、PNG 转 SVG 工具(3)矢量图标库:阿里巴巴矢量图标
    5.Base64: 文本文件,依赖编码,小图标解决方案,通过对图片进行 Base64 编码,我们可以直接将编码结果写入 HTML 或者写入 CSS,从而减少 HTTP 请求的次数。
    6.使用场景
    a.图片尺寸很小,尽可能在图片不超过2KB的情况下
    b.图片无法以雪碧图的形式与其他小图结合(合成雪碧图仍是主要的减少 HTTP 请求的途径,Base6是雪碧图的补充)。
    图片的更新频率非常低(不需要我们重复编码和修改文件内容,维护成本较低)
    为什么大图不使用 Base64?
    因为 Base64 编码后,图片大小会膨胀为源文件的 4/3,如果将大图编码到 HTML 或者 CSS 中,这样后者的体积增加,即便减少了 HTTP 请求,也无法弥补庞大的体积带来的性能开销。
    7.webP : 像 JPEG 一样对图片细节丰富,像 PNG 一样支持透明,像 GIF 一样可以显示动态图片。
    8.雪碧图:小图太多的时候,集中成一张图片减少 HTTP 请求

你可能感兴趣的:(png,jpg,svg的区别)