网站设计 您当前的位置:首页 > 回声智库 > 网站设计 >网页制作中应该这样使用图片

网页制作中应该这样使用图片


发布时间:2016-07-18 09:30:02      作者:回声网络

在网页浏览和网页设计制作中,我们经常会接触到不同的图片格式,其中最为常见和常用的是JPG、GIF和PNG格式。接下来我们分别看一下它们各自的特点。

 

JPEG格式


JPEG也是常见的一种图像格式,它由联合照片专家组(Joint Photographic Experts Group)开发并以命名为"ISO 10918-1",JPEG仅仅是一种俗称而已。JPEG文件的扩展名为.jpg或.jpeg,其压缩技术十分先进,它用有损压缩方式去除冗余的图像和彩色数据,获取得极高的压缩率的同时能展现十分丰富生动的图像,换句话说,就是可以用最少的磁盘空间得到较好的图像质量。由于JPEG格式的压缩算法是采用平衡像素之间的亮度色彩来压缩的,因而更有利于表现带有渐变色彩且没有清晰轮廓的图像。


同时JPEG还是一种很灵活的格式,具有调节图像质量的功能,允许你用不同的压缩比例对这种文件压缩,比如我们最高可以把1.37MB的BMP位图文件压缩至20.3KB。当然我们完全可以在图像质量和文件尺寸之间找到平衡点。


由于JPEG优异的品质和杰出的表现,它的应用也非常广泛,特别是在网络和光盘读物上。目前各类浏览器均支持JPEG这种图像格式,因为JPEG格式的文件尺寸较小,下载速度快,使得Web页有可能以较短的下载时间提供大量美观的图像,JPEG同时也就顺理成章地成为网络上最受欢迎的图像格式。


当使用JPEG格式保存图像时,Photoshop给出了多种保存选项,你可以选择用不同的压缩比例对JPEG文件进行压缩,即压缩率和图像质量都是可选的。

 

GIF格式


GIF是英文Graphics Interchange Format(图形交换格式)的缩写。顾名思义,这种格式是用来交换图片的。事实上也是如此,上世纪80年代,美国一家著名的在线信息服务机构CompuServe针对当时网络传输带宽的限制,开发出了这种GIF图像格式。


GIF格式的特点是压缩比高,磁盘空间占用较少,所以这种图像格式迅速得到了广泛的应用。 最初的GIF只是简单地用来存储单幅静止图像(称为GIF87a),后来随着技术发展,可以同时存储若干幅静止图象进而形成连续的动画,使之成为当时支持2D动画为数不多的格式之一(称为GIF89a),而在GIF89a图像中可指定透明区域,使图像具有非同一般的显示效果,这更使GIF风光十足。目前Internet上大量采用的彩色动画文件多为这种格式的文件,也称为GIF89a格式文件。

 

此外,考虑到网络传输中的实际情况,GIF图像格式还增加了渐显方式,也就是说,在图像传输过程中,用户可以先看到图像的大致轮廓,然后随着传输过程的继续而逐步看清图像中的细节部分,从而适应了用户的"从朦胧到清楚"的观赏心理。目前Internet上大量采用的彩色动画文件多为这种格式的文件。

 

GIF格式只能保存最大8位色深的数码图像,所以它最多只能用256色来表现物体,对于色彩复杂的物体它就力不从心了。尽管如此,这种格式仍在网络上大行其道应用,这和GIF图像文件短小、下载速度快、可用许多具有同样大小的图像文件组成动画等优势是分不开的。

 

PNG格式


PNG格式是由Netscape公司开发出来的格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。PNG的名称来源于“可移植网络图形格式(Portable Network Graphic Format,PNG)”,也有一个非官方解释“PNG's Not GIF”,是一种位图文件(bitmap file)存储格式,读作“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法,一般应用于JAVA程序、网页或S60程序中,原因是它压缩比高,生成文件体积小。

 

体积小 网络通讯中因受带宽制约,在保证图片清晰、逼真的前提下,网页中不可能大范围的使用文件较大的bmp、jpg格式文件。

 

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

 

索引彩色模式 PNG-8格式与GIF图像类似,同样采用8位调色板将RGB彩色图像转换为索引彩色图像。图像中保存的不再是各个像素的彩色信息,而是从图像中挑选出来的具有代表性的颜色编号,每一编号对应一种颜色,图像的数据量也因此减少,这对彩色图像的传播非常有利。


更优化的网络传输显示 PNG图像在浏览器上采用流式浏览,即使经过交错处理的图像会在完全下载之前提供浏览者一个基本的图像内容,然后再逐渐清晰起来。它允许连续读出和写入图像数据,这个特性很适合于在通信过程中显示和生成图像。

 

支持透明效果 PNG可以为原图像定义256个透明层次,使得彩色图像的边缘能与任何背景平滑地融合,从而彻底地消除锯齿边缘。这种功能是GIF和JPEG没有的。

 

PNG同时还支持真彩和灰度级图像的Alpha通道透明度。

 

在网页设计和制作中,我们了解了JPG、GIF和PNG格式各自的特点,在实际使用中我们就会根据其各自的特点合理的存储和使用。选择适合的图片格式不但可以将让网页设计得到合理的显示效果、甚至还可以有效的控制图档的文件大小,节省网页图片加载时间、有效的减少服务器的负担,提高网页下载速度,给到网页浏览者更好的客户体验。

回声科技,网站建设 | 网络推广 多元化一站式服务!免费咨询热线:021-52835722 如需转载,请注明文章出处和来源
网址:http://www.huisheng.com 网站建设回声科技发布,否则视为侵权,谢谢合作!
关于我们

我们专注于为客户提供高端网站策划、网站建设、网站设计、品牌网络营销、小程序开发、电商平台策划开发、APP开发、软件开发、腾讯企业邮箱...

查看更多
最新案例
家具制造公司响应式网站模板案例
减速电机公司响应式自适应网站模板
联系我们

地 址:上海市谈家渡路28号盛泉大厦7楼
邮 箱:info@huisheng.com

微信订阅号 个人微信号
沪公网安备 31010702001726号ICP备案12038328号-1   ©Copyright 上海回声网络科技有限公司 .All Rights Reserved. 网站地图