jpeg,png,webp,svg 的优缺点以及适用场景

前端开发中图片展示时很常见的需求，图片格式有很多种，结合具体的需求场景，我们该如何选择合适的图片格式呢？为了做出正确的选择，首先我们就需要了解各种图片格式的区别以及优缺点，本文主要介绍各种图片的优缺点及适用场景。 

光栅图像文件格式

Web 上最常见的图像格式（JPEG、GIF 和 PNG）都属于光栅类别。

光栅图像文件类型显示静态图像，其中每个像素都有基于其分辨率（例如 1280×720）定义的颜色、位置和比例。

由于它们是静态的，因此你无法有效地调整图像大小，原始设计和像素只会被拉伸以填充额外的空间。这最终会产生模糊、像素化或其他失真的图像。 

矢量图像文件格式

SVG是矢量图像文件类型。

与静态光栅图像文件格式不同，矢量图形使用笛卡尔平面上的线和曲线系统，与总面积相比，而不是任何单个像素。

这意味着你可以无休止地放大原始图像分辨率，而不会损失任何质量或失真。

jpeg图片(也叫做JPG或JPE格式)

支持有损压缩,压缩率高
不支持透明背景
适用于不需要透明图片的业务场景

png图片

支持有损压缩
支持透明背景
浏览器兼容性好
适用于需要透明图片的业务场景

webp图片

压缩程度好，较小的文件可获得相同或更好的图像质量
兼容性问题，并非所有浏览器和图像编辑器都支持

svg图片

矢量图，代码内嵌，相对较小
可伸缩性好，不存在放大缩小导致的图片失真问题
svg 适用于图片样式相对简单的场景， 是徽标、图标、简单插图以及您希望通过响应式设计自由扩展的任何其他内容的理想格式。

使用建议

需要透明背景：webp > png
不需要透明背景：webp > jpeg > png
简单图片(徽标、图标、简单插图): svg
在实现效果差别不大的情况下，选择最优的图片格式，最小化图片体积可以极大的提高访问速度，提升用户体验。

webp 格式如遇到兼容性问题，可退而求其次，各端兼容性可自行查阅相关资料。