资讯专栏INFORMATION COLUMN

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

April / 2204人阅读

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/117409.html

相关文章

  • 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要多的多;同时能得到很好...

    Turbo 评论0 收藏0
  • 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要多的多;同时能得到很好...

    fizz 评论0 收藏0
  • 聊一聊几种常用web图片格式:gifjpgpngwebp

    摘要:由于采用了无损压缩,相比古老的格式,尺寸较小,而且支持透明和动画。采用无损压缩,是基于直接色的位图格式。正是因为其高品质,无损压缩,非常适合用于源文件或需要二次编辑的图片格式的保存。 前言 在大多数的web页面中,图片占到了页面大小的60%-70%。因此在web开发中,不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多,本文仅针对几种web应用中常用的图...

    leo108 评论0 收藏0
  • 聊一聊几种常用web图片格式:gifjpgpngwebp

    摘要:由于采用了无损压缩,相比古老的格式,尺寸较小,而且支持透明和动画。采用无损压缩,是基于直接色的位图格式。正是因为其高品质,无损压缩,非常适合用于源文件或需要二次编辑的图片格式的保存。 前言 在大多数的web页面中,图片占到了页面大小的60%-70%。因此在web开发中,不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多,本文仅针对几种web应用中常用的图...

    894974231 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<