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

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<JGP<PNG

Web页面中png jpg gif webp svg的区别和使用相关推荐

iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
html右键禁用和web页面中添加加入qq群的方式
需求: html禁用右键,防止定位csspath和xpath,同时需要在web页面中加入添加加入qq群的图标实现: html禁用右键:利用oncontextmenu <!doctype htm ...
从此不再为Web页面中的Tooltip烦恼
让Web页面中,不能折行或不希望被折行的文字始终显示在一行,是一种严格的UI风格,毕竟自由的折行会使得表格和整体界面变得很难把握.当然在一行显示不完全时配以省略号在结尾,能很好的提示用户表示语句未结束 ...
php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
[置顶] 读取pdf并且在web页面中显示
读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...
在html页面中怎么打印区域,javascript打印web页面中指定区域的方法
要实现打印web页面中的指定区域,要做到: 将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容. 核心代码: 复制代码代码示例: ...
轻松实现在web页面中直接播放rtsp视频流
轻松实现在web页面中直接播放rtsp视频流写在前面实现介绍如何使用准备ffmpeg 运行rtsp2web 参数说明(在 `new RTSP2web` 时,可配置的参数如下): 前端代码参 ...
VS2008 Tips #008 如何创建ASP.NET Web 用户控件并包含在Web 页面中
在 Visual Web Developer 中创建 ASP.NET Web 用户控件就像 ASP.NET Page 页面一样简单. 以下是创建步骤: 1.打开您想添加用户控件的站点. 2.右键点击站 ...

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

Web页面中png jpg gif webp svg的区别和使用相关推荐

最新文章

热门文章