前端技术分享-码匠 极客编程技术分享

您当前位于:HTML+CSS ——> 网页常见图片有哪些,gif、png、jpg的区别是什么?

网页常见图片有哪些,gif、png、jpg的区别是什么?

2015/05/02 20:18:21 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS | 关键词:gif,jpg,png,图片格式

gif/jpg/png 图片格式 简单对比

HTML5学堂:在网站开发中,我们经常会用到背景图,或者是数据图,这些都是图片,我们常用的图片的文件格式有三种:GIF,JPG,PNG。这三种图片格式具有不同的特点,对动画、透明度支持的情况不同,同时对色彩的处理也不同。我们在开发的过程中只有选择合适的图片格式,才能使我们的开发速度更快

本文章来自于艾某人的网易博客。

在面试的过程中,发现被问的很频繁的是有关于图片格式的问题,这时候才猛然发觉我对这些问题知之甚少,仅停留在表面的一些认知,可能表面的认知也是需要提一下的,但是对于图片的认识越深,才能在选用的过程中选择最适合当前状况的图片格式。

如果对这些图片格式一无所知,为了单纯追求高清晰度的图片效果,或许会做出单一或者叫错误的选择。

gif图片格式

首先,gif格式的图片支持全透明,意思就是它并不支持半透明,仅可以是全透明或完全不透明,这是相对于png而言的。

其次,gif支持动画。1个gif文件中可以存储多幅彩色图像,如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上,就可构成一种最简单的动画。

总结起来,gif广泛支持Internet标准,支持无损耗压缩和透明度,支持动画。但同时,gif格式不适合高清晰度图片,也不支持半透明显示。

jpg图片格式

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

对于前端,首先要知道的是jpg格式的图片完全不支持任何透明的显示,因此当图片有透明度的要求的时候,可以先放弃jpg格式。

jpg支持最高程度的压缩,当需要没有透明要求的大图时,可以尝试保存成jpg格式,适当的压缩到人眼舒适的程度。

欢迎沟通交流~HTML5学堂

png图片格式

png图片能够分成png8、png24和png32,在平时的工作中其实png24已经是十分够用了,png相对于gif和jpg格式流行的比较晚,浏览器和相关图片处理软件对png的处理也是随着发展逐步成熟,人们已经意识到png的可贵。

png格式支持半透明显示,这是很重要的。PNG同时还支持真彩和灰度级图像的Alpha通道透明度。

png图片能获得高的压缩比而不损失数据。“PNG文件采用LZ77算法的派生算法进行压缩,其结果是获得高的压缩比,不损失数据。它利用特殊的编码方法标记重复出现的数据,因而对图像的颜色没有影响,也不可能产生颜色的损失,这样就可以重复保存而不降低图像质量。”

具体的关于png图片格式的内容应该还会再稍微详细一点的介绍,毕竟png不是单纯的png。

HTML5学堂 gif/jpg/png 图片格式 简单对比 h5course

本图片来自于云图网

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端