描述下你所了解的图片格式及适用场景

目录

1、GIF

2、PNG

3、JPG

4、SVG

5、WebP

---

 通常网页在显示的图片（图形）的时候，有以下几种格式：GIF、PNG、JPG、SVG，还有个比较新的WebP格式。

1、GIF

优点：

GIF是动态的；

支持无损耗压缩和透明度；

缺点：

详细的图片和写实摄影图像会丢失颜色信息；

在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式；

GIF 支持有限的透明度，没有半透明效果或褪色效果。

适用场景：

主要用于比较小的动态图标。

2、PNG

优点：

PNG格式图片是无损压缩的图片，能在保证最不失真的情况下尽可能压缩图像文件的大小；图片质量高；

色彩表现好；

支持透明效果；

提供锋利的线条和边缘，所以做出的logo等小图标效果会更好；

更好地展示文字、颜色相近的图片。

缺点：

占内存大，会导致网页加载速度慢；

对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

适用场景：

主要用于小图标或颜色简单对比强烈的小的背景图。

 

3、JPG

优点：

占用内存小，网页加载速度快。

缺点：

JPG格式图片是有损压缩的图片，有损压缩会使原始图片数据质量下降，即JPG会在压缩图片时降低品质。

适用场景：

由于这种格式图片对色彩表现比较好，所以适用于色彩丰富的图片。

主要用于摄影作品或者大的背景图等。

不合适文字比较多的图片。

 

4、SVG

优点：

SVG是矢量图形，不受像素影响，在不同平台上都表现良好；

可以通过JS控制实现动画效果。

缺点：

DOM比正常的图形慢，而且如果其结点多而杂，就更慢；

不能与HTML内容集成。

适用场景：

主要用于设计模型的展示等。

5、WebP

优点：

WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。

图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。

缺点：

相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。

适用场景：

WebP既支持有损压缩也支持无损压缩。

将来可能是JPEG的代替品。