[css] 第30天 描述下你所了解的图片格式及使用场景

[haizhilin2013]

第30天 描述下你所了解的图片格式及使用场景

[AnsonZnl]

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

▍GIF

优点：GIF是动态的；支持无损耗压缩和透明度。

缺点：的详细的图片和写实摄影图像会丢失颜色信息；在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式；GIF 支持有限的透明度，没有半透明效果或褪色效果。

适用场景：主要用于比较小的动态图标。

▍PNG

优点：PNG格式图片是无损压缩的图片，能在保证最不失真的情况下尽可能压缩图像文件的大小；图片质量高；色彩表现好；支持透明效果；提供锋利的线条和边缘，所以做出的logo等小图标效果会更好；更好地展示文字、颜色相近的图片。

缺点：占内存大,会导致网页加载速度慢；对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

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

▍JPG

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

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

适用场景：由于这种格式图片对色彩表现比较好，所以适用于色彩丰富的图片。主要用于摄影作品或者大的背景图等。不合适文字比较多的图片。

▍SVG

优点：SVG是矢量图形，不受像素影响，在不同平台上都表现良好；可以通过JS控制实现动画效果。

缺点：DOM比正常的图形慢，而且如果其结点多而杂，就更慢；不能与HTML内容集成。

适用场景：主要用于设计模型的展示等。

▍WebP

优点：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。

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

适用场景：WebP既支持有损压缩也支持无损压缩。将来可能是JPEG的代替品。

---

作者：颜值界扛把子
来源：CSDN
原文：https://blog.csdn.net/i_dont_know_a/article/details/82491960
版权声明：本文为博主原创文章，转载请附上博文链接！

[github-linong]

补充一下 PNG 的 PNG8 和 PNG24
PNG8 透明图会有锯齿，低版本ie支持，文件小很多
PNG24 透明图不会有锯齿，低版本ie不支持，文件大一些

因为png8和png24存储的透明不是一个量级的。所以png8的透明细节上会出现锯齿。PNG24出来的比较晚所以支持不好可以引入其他方案来解决ie的问题，当然ie都凉了就不说了。

[tzjoke]

补楼上，ico,bmp

[Vi-jay]

gif可以用来埋点 1x1的透明图片 gif字节最小

[blueRoach]

gif，动图，有些刁钻的需求可用
svg，矢量图一般用于图标，logo
png，无损压缩，banner，logo
jpg，有损压缩，没啥要求的图

[CoderLeiShuo]

格式	优点	缺点	适用场景
gif	文件小，支持动画、透明，无兼容性问题	只支持256种颜色	色彩简单的logo、icon、动图
jpg	色彩丰富，文件小	有损压缩，反复保存图片质量下降明显	色彩丰富的图片/渐变图像
png	无损压缩，支持透明，简单图片尺寸小	不支持动画，色彩丰富的图片尺寸大	logo/icon/透明图
webp	文件小，支持有损和无损压缩，支持动画、透明	浏览器兼容性不好	支持webp格式的app和webview

[smile-2008]

gif，动图，有些刁钻的需求可用
svg，矢量图一般用于图标，logo
png，无损压缩，banner，logo
jpg，有损压缩，没啥要求的图

[zxcdsaqwe123]

jpg png svg

[Iambecauseyouare]

webp，png，gif，svg，jpeg
webp：减小客户端与服务器的数据传递，降低延迟，提高用户体验
png：分为png-8和png-24
png-8：支持透明可作为gif的替代
png-24：不在意图片的大小，而想获取最好的显示效果
gif：需要图片大小较小，同时对色彩地要求不高的场景
svg：logo
jpeg：拍照