在前端性能优化中，不同格式图片的特点及业务场景

前端在处理业务的时候，对于图片资源格式的选择是有讲究的，作为一位合格的前端开发人员，必需知道不同格式图片它们的一些特点及常用的业务场景，这样才能做到更优方案的选择。今天小郑给大家捋一捋这方面知识。

常用的图片格式有：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是一种动画的格式，它和我们上面提到的这四种格式不一样，也有区别。作用自然几乎无法替代。有它独特的应用场景。同时也可以关注一下。

本文来源于：小郑搞码事：在前端性能优化中，不同格式图片的特点及业务场景-变化吧门户
特别声明：以上文章内容仅代表作者本人观点，不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。