jpg、gif、png、svg、bmp、WebP图像格式的区别以及应用场景

更新日期: 2019-02-22阅读: 3.2k标签: 图片

一、jpg格式  

全名应该是JPEG。JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式,支持最高级别的压缩,不过,这种压缩是有损耗的。渐近式JPEG文件支持交错。可以提高或降低 JPEG文件压缩的级别。但是,文件大小是以图像质量为代价的。压缩比率可以高达 100:1。(JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件,而图片质量不会下降。)JPEG压缩可以很好地处理写实摄影作品。但是,对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品,JPEG 压缩无法提供理想的结果。有时,压缩比率会低到5:1,严重损失了图片完整性。这一损失产生的原因是,JPEG 压缩方案可以很好地压缩类似的色调,但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。

Jpeg格式特点: 

1、透明性:它不支持透明性 
2、动画:它不支持动画  
3、损耗性:除了一些比如说(仅仅是90、180、270度旋转),裁切,从标准类型到先进类型,编辑图片的原数据之外,所有其它操作对jpeg图像的处理都会使得它的质量损失,所以我们在编辑过程一般用png作为过渡格式。 
4、隔行渐进显示,它支持隔行渐进显示(但是ie浏览器并不支持这个属性,但是ie会在整个图像信息完全达到的时候显示)。 由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。根据惊叹我们在页面中使用的商品图片、采用人像或者好、实物素材制作的广告更适合采用JPG格式保存。


二、gif格式

 GIF(GraphicsInterchange Format)的原义是“图像互换格式”,是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据,是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50%左右,它不属于任何应用程序。目前几乎所有相关软件都支持它,公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的,而且是采用了可变长度等压缩算法。所以GIF的图像深度从lbit到8bit,也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。 

gif 格式特点:

 1、透明性:gif是一种布尔透明类型,即它可以使全透明,也可是全不透明,但是它并没有半透明的(alpha透明)。
 2、动画:gif格式支持动画。 
 3、无损耗性:gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。
 4、水平扫描:gif是使用一种叫做LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif更加小。例如500*10的图片比10*500的图片更加小。 
 5、间隔渐进显示:gif支持可选择性的间隔渐进显示。  

由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标、图表等)。


三、png格式

PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s NotGIF”,是一种位图文件(bitmapfile)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。 

Png格式特点:  

1、类型:Png这种图片格式包括了许多类,但是在实践的大致中可以分为256色的png和全色的png,你完全可以用256色的png代替gif,用全色的png代替jpeg。 2、透明性:png是完全支持alpha透明的(透明、半透明、不透明),尽管有两个怪异的现象在ie6(下面详细讨论) 
3、动画:它不支持动画 

Png8的在ie中的怪异表现

半透明的png8在ie6以下的浏览器显示为全透明。 alpha透明的全色PNG(png32)在ie6中会出现背景颜色(通常是灰色) 

上面可以总结:全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其一下的浏览器下错误的显示成全透明,其它的浏览器都能正常显示半透明。图像上颜色较少、并且主要以纯色或者平滑的渐变色填充以及具备较大的亮度差异的图像适合以png8格式存储。


四、svg格式 

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。 

SVG格式特点:

1、SVG 指可伸缩矢量图形 (Scalable Vector Graphics) 
 2、SVG 用来定义用于网络的基于矢量的图形 
 3、SVG 使用 XML 格式定义图形 
 4、SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 
 5、SVG 是万维网联盟的标准
 6、SVG 与诸如 dom和 XSL 之类的W3C标准是一个整体 

SVG跟上面这些图片格式最大的不同,是SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候,你看到的还是线和曲线,而不会出现像素点。这意味着SVG图片在放大时,不会失真,所以它非常适合用来绘制企业Logo、Icon等。 


五、bmp格式

 BMP是一种与硬件设备无关的图像文件格式,使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。BMP文件的图像深度可选lbit、4bit、8bit及24bit。BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。  

这是一种比较老的图片格式。BMP是无损的,但同时这种图片格式几乎没有对数据进行压缩,所以BMP格式的图片通常具有较大的文件大小。虽然同时支持索引色和直接色是一个优点,但是太大的文件格式格式导致它几乎没有用武之地,现在除了在Windows操作系统中还比较常见之外,我们几乎看不到它。


六、WebP格式

WebP是谷歌开发的一种新图片格式,WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。 想象Web上的图片之多,百分之几十的提升,是非常非常大的优化。只可惜,目前只有Chrome浏览器和Opera浏览器支持WebP格式,所以WebP的应用并不广泛。为了使用更先进的技术,比如WebP图片格式,来压缩互联网上传输的数据流量,谷歌甚至提供了Chrome Data Compression Proxy,设置了Chrome Data Compression Proxy作为Web代理之后,你访问的所有网站中的图片,在经过Proxy的时候,都会被转换成WebP格式,以降低图片文件的大小。

从名字就可以看出来它是为Web而生的,什么叫为Web而生呢?就是说相同质量的图片,WebP具有更小的文件体积。现在网站上充满了大量的图片,如果能够降低每一个图片的文件大小,那么将大大减少浏览器和服务器之间的数据传输量,进而降低访问延迟,提升访问体验。


链接: https://www.fly63.com/article/detial/2084

原生Js对文件类型的判断,判断文件是图片,视频等格式

在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.前端上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型

前端图片懒加载的实现,采用Lazy Load 图片延迟加载提高用户体验

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

web前端图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

网站图片优化的重要性与技巧方案

网站图片优化技巧:1、图片名包括关键词,2、Alt标签包括关键词,3、图片周边文本包括关键词,4、GLF和JPGE图画优化,5、在图片链接中运用锚文本关键字

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

原生js 生成海报图_利用canvas合成图片的实现方法

目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

网页中默认图片的几种解决方式

现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢?下面给出几种方式

h5移动端禁止长按图片保存

在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!