jpg,gif,png-8,png-24的区别

Gif格式特点:  

1.透明性,Gif是一种布尔透明类型,既它可以是全透明,也可以是全不透明,但是它并没有半透明(alpha透明)。  2.动画,Gif这种格式支持动画。   

3.无损耗性,Gif是一种无损耗的图像格式,这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。  4.水平扫描,Gif是使用了一种叫作LZW的算法进行压缩的,当压缩gif的过程中,像素是由上到下水平压缩的,这也意味着同等条件下,横向的gif图片比竖向的gif图片更加小。例如500*10的图片比10*500的图片更加小

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


Jpeg格式特点:  

1.透明性,它并不支持透明。  

2.动画,它也不支持动画。  

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

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

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


Png格式特点:  

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

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

PNG图片格式现在包含三种类型:  

1.PNG8  256色PNG的别名  2.PNG24   全色PNG的别名  3.PNG32   全色PNG的别名 

 

基本上PNG32就是PNG24,但是附带了全alpha通道。就是说每个像素上不仅存储了24位真色彩信息还存储了8位的alpha通道信息,就如同GIF能存储透明和不透明信息一样。当我们把图片放到不太搭配的背景上的时候,透明PNG图片的边缘会显示得更加平滑。  虽然Photoshop也能生成带透明通道的PNG图片,但是它只是表面上这么说是PNG24,让我也产生困惑了。  我使用PNG32支持附带alpha通道的真色彩图片。不管怎样,如果你习惯使用Photoshop,你就应该知道,Photoshop在“存储为WEB格式”中只提供PNG8和PNG24两种PNG格式。    


对png8的误解  

Png8的在ie中的怪异表现:  

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


由上面可以总结:  

(a)全透明的png8可以在任一浏览器正常显示(就像gif一样)。半透明的png8在除了ie6及其以下的浏览器下错误的显示成全透明,其它浏览器都能正常显示半透明。这个bug并不需要特殊对待,因为在不支持半透明的浏览器下只是显示为全透明,对用户体验影响不大,它反而是透明gif的加强版。  

(b)第二个bug没有什么好的方法解决,只能通过影响性能的方法AlphaImageLoader与需要加特殊标签(VML)。  

因此得出结论就是:请使用PNG8。  Png8的软件问题:  Photoshop只能导出布尔透明的PNG8。  Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8.   


下面是图片格式的区别与特点列表,相信看了后,理解会深一点。


下面列了部分经验:

jpg和png文件大小差不多时,推荐使用png;大小相差很大时使用jpg。

手机app的欢迎页面、icon要用png,在不影响视觉效果的前提下,可用png-8。

依据图像上的色彩层次和颜色数量来选择保存的格式。一般层次丰富颜色较多的图像采用JPG存储,而颜色简单对比强烈的则需要采用PNG。

网页切图原则:按照保证色彩显示良好同时文件最小的原则来切。

1、网站的LOGO,如果色彩简单,选择PNG或者GIF,推荐前者。但是如果为了IE6的兼容,选择后者;如果你需要动图,选择GIF。

2、网站上的元素背景图片(比如按钮背景、导航条背景),或者很精细的图片,还是那句话,如果色彩简单,选择PNG或者GIF,推荐前者。但是如果为了IE6的兼容,选择后者,但要考虑失真问题;少用JPG,否则会让这些东西很难看,除非你用风景图片作按钮背景。

3、网站内容里,你真实拍摄的图片或者风景图片,保存JPG来获得更好的显示效果和体积。

注意,IE6下PNG的透明是不能显示的,有其对应的Hack方法。


总结:

gif:

每个像素点是8位二进制的,从00000001——11111111,总共256种颜色

支持动画

支持一定程度的透明度

logo等小图片或者动图使用gif比较合适

jpeg:

每个像素点是24位二进制的,总共1600多万种颜色

有损压缩,每一次的修改保存都会降低画面质量,但是保存时可以选择高质量保存

照片等颜色丰富的使用jpeg

png:

支持透明效果,比gif支持的透明效果好的多

无损格式

png-8即每个像素点支持256种颜色

png-24每个像素点支持1600多万种颜色

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容