乐趣区

Web页面中png jpg gif webp svg的区别和使用

PngPNG 包括 png- 8 和 png-24 png-32
相对来说体积小;支持透明
24(160W)比 8(256)像素 色块 色彩 要多很多
8 位保存的时候会有锯齿边缘
24 位是透明边缘
24 位 PNG,支持 160 万种不同的像素颜色且支持 Alpha 透明效果,这就意味着,无论透明度设置为多少,PNG 图片均能够与背景很好的融合在一起。
JpgJPG 能显示的颜色比 gif 和 png 要多的多;同时能得到很好的压缩;但是是一种失真压缩(压缩比;分辨率;可感知失真);jpg 适合应用在那些允许轻微失真的像素色彩丰富的场景;不适合做简单色彩的图片(icon,小 logo)
Gif 支持动画;也是一种无损的图片格式(修改图片后;图片质量没有损失);仅支持 8 位颜色深度;受这个限制;gif 不适合应用于各种色彩过于丰富的场景
WebpGoogle 开发的一种旨在加快图片加载速度的图片格式,图片压缩体积大约是 jpg 的 2 /3;能大量节省服务器带宽资源和数据空间;也是一种有损压缩;目的就是加快网络图片的传输效率;让图片更快的显示在用户面前;目前所知道的只有高版本的 W3C 浏览器才支持(chorme39+,safari7+)
SvgSVG 正变得越来越热门,它不同于以上所有的文件类型,因为它是一个矢量文件格式。这就是说它实际上是由线条和曲线,而不是像素组成的。当你放大一个矢量图像时,你仍然看到一条曲线或一条线。当你放大一个由像素构成的图像时,你会看到像素。
优点:
对于小 logo 和图片来说;svg 是很理想的;因为无论是 Retina 屏还是其他低分辨率的屏幕上显示都是一样的;svg 的 logo 可以放大不失真;如果是像素构成的图片格式想要不失真就要多套的图片,svg 是用 XML 编写的;可以用 js 来改变 svg 图片的颜色
缺点:
Svg 在渲染的时候需要比像素图更多的计算能力;更加的消耗性能;所以你的 svg 图比较复杂;可能会很耗费性能;甚至文件大小也很大
总结:小图片(icon)或则网页基本元素(按钮)可以使用 png-24 或则 gif;图片考虑 jpg
体积 webp<JGP<PNG

退出移动版