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 请求