点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！
前端在处理业务的时候，对于图片资源格式的选择是有讲究的，作为一位合格的前端开发人员，必需知道不同格式图片它们的一些特点及常用的业务场景，这样才能做到更优方案的选择。今天小郑给大家捋一捋这方面知识。
常用的图片格式有：JPG、PNG、WEBP、SVG。
一、各种图片格式的特点
1、jpg
这种格式的图片属于有损压缩。它的优点是压缩率比较高，缺点就是不支持透明。
2、png
这种格式的图片是我们比较熟悉的，用的也是最多一种格式，它支持透明，而且浏览器兼容性很好，最重要的一点，它还有png8，png24，png32三种格式。这样的话，在压缩的过程中就有一个降阶的过程，也就是说，如果png8支持的比较好的话，它的文件大小就会小一些。
3、webp
webp是2010年google提出来的一种文件格式，它最明显的特点就是压缩程度更好，但在前端应用中， 在IOS webview的兼容性不是很好，只是Android有很好的兼容。
4、svg
svg矢量图，本质上就是用svg标签在HTML中进行相关图形的一个绘制，矢量图不会因为图片的放大和缩小出现一些不清晰的问题。所以它的质量是比较高的，代码是内嵌在HTML中的svg代码，相对来说体积是比较小一些。
现在有一个大家比较熟悉的库提供了一些svg资源的引用：iconfont。当然，由于svg的绘制能力还是有限的，所以这种格式一般适用于图片样式相对简单的业务场景。
二、各种图片格式适用的业务场景
1、jpg
适用于大部分不需要透明图片的业务场景。
因为jpg的相对于png来说，它的压缩率是更高的， 所以文件更小。这一点非常重要。在平时项目中一定要考虑。
2、png
适用于大部分需要透明图片的业务场景。
这种图片格式实际是我们用的最多的一种，因为我们大部分都需要这种透明的图片。
3、webp
适用于安卓机型。
这种格式的主要问题就是ios safari和webview的支持不是很好。据说它的解码速度和压缩率都是高于png的。建议在安卓机型上考虑应用这种格式。
4、svg
适用于图片样式相对简单的业务场景：比如一些logo什么的。
其次就是页面中的一些小的icon。可以直接引用iconfont库。icon本身也是基于svg。
最后总结一下：
其实上面我没有提到gif。gif是一种动画的格式，它和我们上面提到的这四种格式不一样，也有区别。作用自然几乎无法替代。有它独特的应用场景。同时也可以关注一下。
閱讀更多 小鄭搞碼事 的文章
