GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理
2015-05-04 00:32
447 查看
GIF/PNG/JPG/WEBP/APNG都是属于位图（位图 ,务必区别于矢量图）；
GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp图片格式现在还不普及：
View Code
效果图：
优点
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图片明明很模糊的啊, 为什么呢？
利用Base64的不可读性，可以加密字符串，标准浏览器的window下有两个方法，分别是window.btoa和window.atob，（IE67下虽然不支持，但是可以用vbscript模拟，参考司徒正美大牛（简称司牛）的地址，如下：
优点：
1：减少了http请求；
2：数据就是图片；
缺点：
1：如果图片稍微有点大，这个字符串会很长很长；
2：IE6,7 你懂得；
如何获取图片对应的base64字符串呢？
1：使用代码获取：
2：在webkit内核浏览器有个挺方便的技巧， 你打开发者工具， 选中图片， 那么右侧就会出现对应图片的base64 ，你把这个字符串复制一下，在字符串前面加上data:images/gif;base64,然后直接复制到浏览器的地址栏， 打开就会显示这副图片;
：
base64图片的DEMO:
张鑫旭：base64图片参考
webp的百科链接
女汉子整理的css知识
淘宝UED的神文
GIF/PNG和JPG这三种格式的图片被广泛应用在现今的互联网中,gif曾在过去互联网初期慢速的情况下几乎是做到了大一统的地位,而现如今随着互联网技术应用和硬件条件的提高,png和jpg格式的图片越来越多的被应用,gif昔日的辉煌一去不复, webp图片格式现在还不普及：
GIF（Graphics Interchange Format）
<!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图片颜色看起来更加鲜艳自然;
base64
Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64编码可用于在HTTP环境下传递较长的标识信息, 直接把base64当成是字符串方式的数据就好了利用Base64的不可读性，可以加密字符串，标准浏览器的window下有两个方法，分别是window.btoa和window.atob，（IE67下虽然不支持，但是可以用vbscript模拟，参考司徒正美大牛（简称司牛）的地址，如下：
<!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> <script> var str = "nono::::"; var result = ""; console.log( result = window.btoa(str) ); //bm9ubzo6Ojo= console.warn( window.atob( result ) ); //nono:::: </script> </body> </html>
优点：
1：减少了http请求；
2：数据就是图片；
缺点：
1：如果图片稍微有点大，这个字符串会很长很长；
2：IE6,7 你懂得；
如何获取图片对应的base64字符串呢？
1：使用代码获取：
var reader = new FileReader(), htmlImage;
reader.onload = function(e) {
htmlImage = '<img src="'+ e.target.result +'" />'; // 这里e.target.result就是base64编码
}
reader.readAsDataURL(file);2：在webkit内核浏览器有个挺方便的技巧， 你打开发者工具， 选中图片， 那么右侧就会出现对应图片的base64 ，你把这个字符串复制一下，在字符串前面加上data:images/gif;base64,然后直接复制到浏览器的地址栏， 打开就会显示这副图片;
：
base64图片的DEMO:
<!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> <img src="data:images/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAFo9M/3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM4RjcyMUE5NEFDNzExRTA5RjMxODI4RjU2OTNEMzNCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM4RjcyMUFBNEFDNzExRTA5RjMxODI4RjU2OTNEMzNCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzhGNzIxQTc0QUM3MTFFMDlGMzE4MjhGNTY5M0QzM0IiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzhGNzIxQTg0QUM3MTFFMDlGMzE4MjhGNTY5M0QzM0IiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5fTzGYAAADg0lEQVR42mJgAAIlRY3/TMryegp3VX8xAAQQg76BlQFIlOG9Fv9/TXmt/wABBOa4uwX8BwF9Q4v9DCC1n798+//r95//B9rN/wMEEFiFtpbxf1l5BQcwR0VRux+kXEle9T+Iz9htqP2/WEuQ4e2jZwy2L/kdGTZ3WYANvPXk7X8pcVkFgAACa5OXVxOwtA75DwOKQO2yCooKIDkWEDFf/P/7Jw92MjAcEGFguPmJof4fO4O4iOR9zwcMjAxqSob7KzLj/z81V/7/7dv3/79///7/7efv/5G2Wv/lZVT2M4JM+H8n6P+1tR8Y7muXMvD/fc2gz17BcHk/F4N15x1GgABigAEbW8/16iq6/xUV1fbDxIDOgTDMzD3fHz245z8zM/N/EK0or/IfpoAJxHj78rEAAxJgROZUMTA47OAX+P+rm/3//zUs/392sP5fJCb2fzoPQwPIBEZjY8f/256fZeA1lGfgBHr6/4d3DNeeMjNEsEsyXL5yghEU+v9/Pnv2/0mg0/8fP37+//fv3/8X7778l5VS/g9zg+Ctr38ZxFbuZGBjY2P4/O0Xw4/P7xn+/v0lCA7JGYb3DbQ/mDEcORzHwK4dxiD7rJVBXpeBYbn9e1DUHwAIUCa5+zIUgFH8tLf1qFZvQ1yVktvWo14VJBLEIwYxSCqWRmJobV2kEf+A2CwVIRbhDiYiGEjEwILFwCAS8ahHRGl6tW7r3roPbRMN8S3f9J2c73fOH8OO2pahCtq5GWUjYMNPEL94KJDTD0OlUiAqovfh/pb5xyk9dmudp87RrvR0DWQCTTPzT81n9k/ANrpKqax0rPwWyDoYJ/XsDkmTR74bUP0prLkVgBADIiGEX+MovhHhXLahMfqKLiFq9XEIZgW6zXb/tIkPdAdZXNRYsE7lwBIMQ9YmoZZzYCTUoD4VOAUJSyYzdiNx5uDx2psRaKzvCEiS5C8vNWBh1A1uZhIaXT7K6HJoKTOSNc34stih0NUg7LVoa2oDodWgoNDAnJ+deDUJjksX93C0j+ql3SNQrc8ikmuEafMoyycVHWIJAUk+geHBFqxtHR/ynx9ktjZznXqyw02zRcU2hBoCoC0lKNTlQZJl8Ekxc/x8dwnzxQTeYgIu966tY/tc8A/EDZfeU++QXakekBIrv59eEdu+4ziz2K7ztFoll4okSIMO76EX9XbPKsf8pPANFgKR/lchulcAAAAASUVORK5CYIIvKiAgfHhHdjAwfGIyZTA0ZTk5NjI2MWI5OWRkOTRkZjNlZjg2YWMzM2ZiICov" /> </body> </html>
APNG
这东西是mozilla搞出来的， 它是24位的，而且也是动图，可以容纳1680万种颜色，也是为了取代GIF，但是....也就火狐支持，IE10和chrome，safari全部不行， 如果说gif图片是卡片机的话， APNG就是单反， 测试浏览器是否支持apng格式;张鑫旭：base64图片参考
webp的百科链接
女汉子整理的css知识
淘宝UED的神文
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理
- GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理（转）
- Gif,png,jpg,webp几种图片格式整理
- 网页webp转非webp的jpg gif png 图片
- 【整理】详说JPG,GIF及PNG各类型的图片格式
- png，jpg，gif这些图片格式解释一下，分别什么时候用，webp呢
- css考核点整理（十三）-jpg/png/gif等图片类型区别
- php 利用远程图片创建新图片完善(jpg,png,gif)
- 图片压缩 java 压缩 JPG JPEG PNG GIF
- java将图片缩放实现类(能将jpg、bmp、png、gif图片文件，进行等比或非等比的大小转换)
- android开发 实现同时显示png/jpg 等bitmap图片还可以显示gif图片，有效防止OOM
- c#判断图形文件(GIF,JPG,PNG)的图片格式的方法
- VC 下加载 JPGJPEGGIFPNG 图片最简单的方法
- JPG、PNG和GIF图片的基本原理及优化方法
- VC下加载JPG,JPEG,GIF,PNG图片最简单的方法
- VB6.0用GDI+保存图片为JPG、TIFF、PNG、GIF、BMP等格式
- 常见图片格式jpg、jpeg、png、gif等有什么区别
- png、jpg、gif三种图片格式的区别
- 渐进式 jpg 和 交错式 gif png 提高图片站体验
- png、jpg、gif三种图片格式的区别