Png
PNG包括png-8和png-24 png-32
相对来说体积小；支持透明
24（160W）比8（256） 像素 色块 色彩 要多很多
8位保存的时候会有锯齿边缘
24位是透明边缘
24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。
Jpg
JPG能显示的颜色比gif和png要多的多；同时能得到很好的压缩；但是是一种失真压缩（压缩比；分辨率；可感知失真）;jpg适合应用在那些允许轻微失真的像素色彩丰富的场景；不适合做简单色彩的图片（icon，小logo）
Gif
支持动画；也是一种无损的图片格式（修改图片后；图片质量没有损失）；仅支持8位颜色深度；受这个限制；gif不适合应用于各种色彩过于丰富的场景
Webp
Google开发的一种旨在加快图片加载速度的图片格式，图片压缩体积大约是jpg的2/3；能大量节省服务器带宽资源和数据空间；也是一种有损压缩；目的就是加快网络图片的传输效率；让图片更快的显示在用户面前；目前所知道的只有高版本的W3C浏览器才支持 （chorme39+，safari7+）
Svg
SVG正变得越来越热门，它不同于以上所有的文件类型，因为它是一个矢量文件格式。这就是说它实际上是由线条和曲线，而不是像素组成的。当你放大一个矢量图像时，你仍然看到一条曲线或一条线。当你放大一个由像素构成的图像时，你会看到像素。
优点：
对于小logo和图片来说；svg是很理想的；因为无论是Retina屏还是其他低分辨率的屏幕上显示都是一样的；svg的logo可以放大不失真；如果是像素构成的图片格式想要不失真就要多套的图片，svg是用XML编写的；可以用js来改变svg图片的颜色
缺点：
Svg在渲染的时候需要比像素图更多的计算能力；更加的消耗性能；所以你的svg图比较复杂；可能会很耗费性能；甚至文件大小也很大
总结：小图片（icon）或则网页基本元素（按钮）可以使用png-24或则gif；图片考虑jpg
体积 webp
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/102021.html
PngPNG包括png-8和png-24 png-32 相对来说体积小；支持透明 24（160W）比8（256） 像素 色块 色彩 要多很多 8位保存的时候会有锯齿边缘 24位是透明边缘 24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。 JpgJPG能显示的颜色比gif和png要多的多；同时能得到很好...
PngPNG包括png-8和png-24 png-32 相对来说体积小；支持透明 24（160W）比8（256） 像素 色块 色彩 要多很多 8位保存的时候会有锯齿边缘 24位是透明边缘 24位PNG，支持160万种不同的像素颜色且支持Alpha透明效果，这就意味着，无论透明度设置为多少，PNG图片均能够与背景很好的融合在一起。 JpgJPG能显示的颜色比gif和png要多的多；同时能得到很好...
摘要：由于采用了无损压缩，相比古老的格式，尺寸较小，而且支持透明和动画。采用无损压缩，是基于直接色的位图格式。正是因为其高品质，无损压缩，非常适合用于源文件或需要二次编辑的图片格式的保存。 前言 在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多，本文仅针对几种web应用中常用的图...
摘要：由于采用了无损压缩，相比古老的格式，尺寸较小，而且支持透明和动画。采用无损压缩，是基于直接色的位图格式。正是因为其高品质，无损压缩，非常适合用于源文件或需要二次编辑的图片格式的保存。 前言 在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多，本文仅针对几种web应用中常用的图...
阅读 2887·2021-11-15 11:39
阅读 1512·2021-08-19 10:56
阅读 1092·2019-08-30 14:12
阅读 3730·2019-08-29 17:29
阅读 718·2019-08-29 16:21
阅读 3415·2019-08-26 12:22
阅读 1513·2019-08-23 16:30
阅读 1015·2019-08-23 15:25
