www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

【Web前端】昔不方今格式图片的应用情状,WebP图

2020-02-02 01:01 来源:未知

时间: 2019-02-22阅读: 485标签: 图片一、jpg格式

最近在探索在Web应用中不同图片格式的使用场景。
首先,对于图片的压缩有两种方式:Web前端,(Lossless)无损(Lossy)有损

Gif格式特点

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

无损

透明性

Jpeg格式特点:

意味着图片大小减小了,但并对图片质量没有损耗。

Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha 透明)。

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文件中可以存多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。

则意味着图片大小减小得更多了,但一定程度上损耗了图片质量。如果你一遍又遍地通过有损方式保存一张图片,那么这张图片质量会越来越差。
其次,还有两个色彩深度(色深):(Indexed color)索引色(Direct color)直接色

Gif这种格式支持动画。

gif 格式特点:

索引色

无损耗性

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

意味着图片只能以有限的颜色(通常是8bit,256种颜色)来进行存储,通常是由一个作者使用一个叫做(Color Map)色彩索引的东西进行控制。

Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使 得图像质量产生损耗。

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

直接色

水平扫描

三、png格式

则意味着图片可以使用成千上万种颜色来进行存储。
另外,还有一个,点阵图矢量图

Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小

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

点阵图

间隔渐进显示

Png格式特点:

也叫做位图,删格图象,像素图。其最小单位由象素构成的图,�这些像素点可以进行不同的排列和染色以构成图样,进行缩放时会失真。

Gif支持可选择性的间隔渐进显示

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

�矢量图

由以上特点看出只有256种颜色的gif图片不适合照片,但它适合对颜色要求不高的图形(比如说图标,图表等),它并不是最优的选择,我们会在后面中看到png是最优的选择。

Png8的在ie中的怪异表现

也叫做向量图。与点阵图不一样的是,矢量图记录的是用于绘制图形形状的算法,所以,即使对画面进行倍数相当大的缩放,其显示效果仍然表现为不失真。
在以上基础上,说说不同图片格式的使用场景。
BMP

Jpeg格式特点

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

BMP(BitMap)是一种无损,支持直接色与索引色的点阵图。BMP是一种比较古老的图片格式,是window操作系统的标准图像文件格式。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。�BMP适用场景:Windows操作系统。

透明性

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

GIF

它并不支持透明。

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

GIF(Graphics Interchange Format)是一种无损,支持索引色的点阵图,GIF支持动画和单一色透明。GIF是通过LZW压缩算法进行压缩的,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。以GIF格式保存图片不会降低图片质量,相同图片质量下,GIF会比BMP小。但是,GIF只支持8bit的索引色,一张图片上最多只能存在256种色彩。GIF适用场景需要图片大小较小,同时对色彩的要求不高的场景,比如:企业Logo、线框类的图,动态图。

动画

SVG格式特点:

�JPEG

它也不支持动画。

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

JPEG(Joint Photographic Experts Group)格式是一种有损的,支持�直接色的点阵图,不支持透明和动画。JPEG的目标是在获取极高的压缩率的同时能展现十分丰富生动的图像,采用压缩的算法,对图片上每8px*8px的像素进行处理,通过强制渐变的方式来减小文件尺寸。JPEG使用24bit展现一个像素点的颜色,能表示1600万种颜色,使得它非常适合用来存储照片。JPEG适用场景:拍照。

损耗性

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

��PNG-8

除了一些比如说旋转(仅仅是90、180、270度旋转),裁切,从标准类型到先进类型,编辑图片的原数据之外,所有其它操作对jpeg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。

五、bmp格式

�PNG-8是PNG(Portable Network Graphics)格式的索引色版本,是无损的,使用8bit索引色的点阵图,支持透明。�PNG-8是在GIF非常不错的替代品,采用与GIF相同的压缩算法,横向图片比竖向图片要小。PNG-8使用8bit展现一个像素点的颜色,能表示256种颜色,同时支持alpha透明(FireWork软件支持),能对透明度进行调节,比GIF对透明度的支持更好。

隔行渐进显示

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

��PNG-24

它支持隔行渐进显示(但是ie浏览器并不支持这个属性,但是ie会在整个图像信息完全到达的时候显示)。

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

�PNG-24是PNG格式的直接色版本,是无损的,使用24bit直接色的点阵图,不支持透明。�PNG-24是听起来和BMP很像,的确,显示效果上没有什么不同,但优于对图片进行了压缩,所以相同条件下会比BMP格式图片小得多,当然,PNG24的图片还是要比JPEG、GIF、PNG-8大得多。PNG-24不支持alpha透明,于是PNG-32出现,PNG-32实际只是PNG-24的基础上添加了8位的透明度支持,PhotoShop能导出支持透明的PNG-24,其实是添加了8位透明度的PNG-32。�PNG-24适用场景:不在意图片文件大小,而想获取最好的显示效果。

由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。

六、WebP格式

��SVG

Png格式特点

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

SVG(Scalable Vector Graphics)全称可缩放矢量图形,是一种无损的的�矢量图。SVG使用XML对一个图形进行描绘,而使用XML意味着可以把SVG当成一个文件来对待,随时打开编辑器就可以对图形进行编辑修改。同时SVG使用的是矢量图,优点在于对于图片的缩放时,都不会出现有像素点,保证不会失真。SVG适用场景:企业LOGO,需要进行缩放频率较高的图形绘制(图表,地图等)。

类型

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

���WEBP

Png这种图片格式包括了许多子类,但是在实践中大致可以分为256色的png和全色的png,你完成可以用256色的png代替gif,用全色的png代替jpeg

WEBP是google推出的意图改变GIF、JPEG、PNG三分天下的新型的图片格式,是一种使用直接色,支持无损或有损压缩、alpha通道,还支持动画演示的点阵图。与以上提到的几种图片格式相比,WEBP具体更小的图片体积。据不完全统计,互联网流量的产生60%来自于图片,如果能降低每一张使用的图片的大小,那可以减小客服端与服务器的数据传递,降低延迟,提高用户体验。
在无损压缩的情况下,相同质量的WebP图片,文件大小要比PNG小26%;
在有损的情况下,在等效SSIM质量指数下,文件大小可比JPEG图像小26 – 34%;
无损WebP支持透明(也称为alpha通道)的成本只有22%额外的字节。

透明性

参考:
https://gcsecomputing.org.uk/theory/colour-mapping-and-direct-colour/
https://www.zhihu.com/question/20028452
http://personabledesign.com/2011/10/finally-a-use-for-fireworks-alpha-transparent-png8/
http://blog.csdn.net/xcysuccess3/article/details/38845625

Png是完全支持alpha透明的(透明,半透明,不透明),尽管有两个怪异的现象在ie6(下面详细讨论)

如果您在阅读过程中发现有什么问题,欢迎指正。

动画

它不支持动画

无损耗性

png是一种无损耗的图像格式,这也意味着你可以对png图片做任何操作也不会使 得图像质量产生损耗。这也使得png可以作为jpeg编辑的过渡格式

水平扫描

像GIF一样,png也是水平扫描的,这样意味着水平重复颜色比垂直重复颜色的图片更小

间隔渐进显示

它支持间隔渐进显示,但是会造成图片大小变得更大

更多关于PNG

PNG8

256色PNG的别名

PNG24

全色PNG的别名

PNG32

全色PNG的别名

其它图片格式与PNG比较

众所周知GIF适合图形,JPEG适合照片,PNG系列两种都适合。

相比GIF

PNG 8除了不支持动画外,PNG8有GIF所有的特点,但是比GIF更加具有优势的是它支持alpha透明和更优的压缩。所以,大多数情况下,你都应该用PNG8不是GIF(除了非常小的图片GIF会有更好的压缩外)。

相比JPEG

JPEG比全色PNG具有更加好的压缩,因此也使得JPEG适合照片,但是编辑JPEG过程中容易造成质量的损失,所以全色PNG适合作为编辑JPEG的过渡格式.

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:【Web前端】昔不方今格式图片的应用情状,WebP图