GIF/PNG/JPG和WEBP图片有点和缺点整理

浏览数：23 / 时间：2015年06月09日

　　GIF/PNG/JPG/WEBP都是属于位图（位图 ,务必区别于矢量图）；

　　GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp图片格式现在还不普及：

　 GIF（Graphics Interchange Format）

技术分享

　　GIF图形交换格式是一种位图图形文件格式,以8位色（即256种颜色）重现真彩色的图像。它实际上是一种压缩文档,采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。它是目前广泛应用于网络传输的图像格式之一。

优点

　　1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
　　2. 可插入多帧,从而实现动画效果。
　　3. 可设置透明色以产生对象浮现于背景之上的效果。

缺点

　　由于采用了8位压缩,最多只能处理256种颜色（2的8次方）,故不宜应用于真彩图像。

　　PNG（Portable Network Graphics）

　　便携式网络图片（Portable Network Graphics）,简称PNG,是一种无损数据压缩位图图形文件格式。PNG格式是无损数据压缩的,PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同的透明形式（索引透明和alpha透明）,24位PNG不支持透明,32位 PNG 在24位基础上增加了8位透明通道（32-24===8）,因此可展现256级透明程度。

　　PNG这种类型的图片就是为了取代GIF图片而生的, 除了GIF不支持动画的优势, 能用PNG的地方就用PNG, 原因是压缩比高,色彩好；

技术分享

优点

　　* 支持256色调色板技术以产生小体积文件
　　* 最高支持48位真彩色图像以及16位灰度图像。
　　* 支持Alpha通道的半透明特性。
　　* 支持图像亮度的gamma校正信息。
　　* 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。
　　* 使用无损压缩。
　　* 渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。
　　* 使用CRC循环冗余编码防止文件出错。
　　* 最新的PNG标准允许在一个文件内存储多幅图像。

缺点

　　但也有一些软件不能使用适合的预测,而造成过分臃肿的PNG文件。

让IE6透明的小技巧：

　　如上图所示, IE6支持全透明,不支持半透明, 所以我们在PS到处透明图片的时候可以把图片设置为png8,在PS的生成图片是记得把png透明的选项勾选上,测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <style>
        body{
            background:#eee;
        }
        p{
            position:absolute;
        }
        p.p1{
            left:200px;
            top:140px;
        }
        p.p2{
            left:500px;
            top:140px;
        }
        img{
            position:relative;
        }
    </style>
    <p class="p1">
        text
    </p>
    <p class="p2">
        text
    </p>
    <img src="http://images.cnitblog.com/blog2015/497865/201505/022343328802481.png" />
</body>
</html>

View Code

效果图：

技术分享

JPG（Joint Photographic Experts Group）

　　JPEG是一种针对相片影像而广泛使用的一种失真压缩标准方法。JPEG的压缩方式通常是破坏性资料压缩（lossy compression）,意即在压缩过程中图像的品质会遭受到可见的破坏。

优点

　　JPEG/JFIF是最普遍在万维网（World Wide Web）上被用来储存和传输照片的格式。JPEG在色调及颜色平滑变化的相片或是写实绘画（painting）上可以达到它最佳的效果。在这种情况下,它通常比完全无失真方法作得更好,仍然可以产生非常好看的影像（事实上它会比其他一般的方法像是GIF产生更高品质的影像,因为GIF对于线条绘画（drawing）和图示的图形是无失真,但针对全彩影像则需要极困难的量化）。

缺点

　　它并不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果；

　　给个活生生的例子：一张照片在Instagram反复上传下载90次之后....(在博客园找了半小时,link), 在最后jpg图片完全变样了;

技术分享

WEBP图片格式：

　　2010年谷歌推迟的图片格式,专门用来在web中使用, 压缩率只有jpg的2/3或者更低；第一个版本的webp图片格式是有损的, 新版本中webp图片是无损的。

　　相对于png图片,webp比png小了45%,但是缺点是你压缩的时候需要的时间更久了；

技术分享

优点：

　　体积小巧；

缺点：

　　兼容性不太好, 只有opera,和chrome支持;

　　但是有个插件可以让所有浏览器都支持webp格式, 利用了flash把webp图片转换为浏览器可以识别的图片格式;
　　WebP插件打包下载：http://www.etherdream.com/WebP/WebP.zip
　　WebP插件在线Demo：http://www.etherdream.com/WebP/
　　WebP插件源码下载：http://code.google.com/intl/zh-CN/speed/webp

额外的信息：

　　前面如果有看清楚的有写png和gif是无损压缩,但是实际上通过作图工具导出的png或者gif图片明明很模糊的啊, 为什么呢？

    因为gif是8位的压缩,"8位"是指图片所能表现的颜色深度, 一个8位图像仅最多只能支持256种不同颜色(一个多余256种颜色的图片若用gif图片保存会出现失真, 相对于jpg图片来讲, gif有他所能表示色彩的极限, 如果原图中色彩太多了就悲剧了, 所以所谓的无损是相对于jpg格式会对图片进行压缩的一种说法);
    png的图片有8为有24为有32位, 当然实际上24位和32位的png图片颜色看起来更加鲜艳自然;

　　webp的百科链接

　　女汉子整理的css知识

　　淘宝UED的神文

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

GIF/PNG/JPG和WEBP图片有点和缺点整理