jpg、png和svg图片格式的区别_svg和png加载速度有什么区别

jpg、png和svg图片格式的区别：

位图：点阵图（像素图），由电脑上屏幕上的发光（像素）的构成，如jpg.png,gif等
矢量图：向量图，由一系列计算机指令来描述和记录一幅画，因为生成的矢量图文件存储量很小，适合文字设计和图案设计等,如svg等
无损压缩：对文件本身的压缩，使图片占用的存储空间变小，并且不会损坏图片的质量，如png等；
有损压缩：对图像本身的改变，会对图片质量造成损害，随着压缩次数越来越多，图片质量会越来越差，如jpg等；

如果要减少图像占用内存的容量，就必须使用有损压缩方法。(删除人类不敏感的信息，无法复原)

1. jpg(jpeg)：（像素图）、有损压缩、体积小、加载快、不支持透明，不支持动画。

使用场景：大的背景图，轮播图，Banner图。

2. png：（像素图）、无损压缩、质量高、体积大、支持透明，不支持动画；有png-8,png-24。

使用场景：
(1）小的Logo，颜色简单且对比强烈的图片或者背景。
(2）颜色简单，对比度强的透明小图。

3. svg：（向量图）文本文件、体积小、不失真、兼容性好、可缩放、可以任意放大图形显示，并且不会损失图片质量；
   特点：
   （1）SVG 格式可编辑和可搜寻；
   （2）SVG 格式平均来讲，比 JPG 和 GIF 格式文件要小，并且下载也比较快。SVG 文件通常是极小的，但是当图形的复杂度变高的时候，SVG 文件大小会随之上升，
   （3）因为 SVG 在渲染的时候需要比像素图更多的计算能力，这也意味着性能的损耗。所以在 Logo 等图上，应尽可能简洁。

使用场景：
（1）SVG loading 效果图：SVG-Loaders
（2）转换工具：在线 JPG、PNG 转 SVG工具
（3）矢量图标库：阿里巴巴矢量图标

原文链接：https://blog.csdn.net/qq_42323925/article/details/109582239