网页制作中对于图像格式的选用

2016-02-19 16:34 0 1 收藏

下面是个网页制作中对于图像格式的选用教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - Web开发 】

  今天有个学生问我:页面中使用GIF格式,失真太大,怎么办呢?这个问题比较简单啊,只要用JPG就可以了。我们常用的页面的图片格式有三种,GIF、JPG、PNG。那么这三种格式我们怎么选择使用呢?下面就我的一些经验来谈谈我对于这三个格式的使用上的一些看法。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  下面我们先了解一下几种格式的比较正式的解释:

  GIF意为Graphics Interchange format(图形交换格式),GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式,而且有的图形浏览器只认识GIF格式。GIF是一种索引颜色格式,在颜色数很少的情况下,产生的文件极小,它的优点主要有:

  GIF格式支持背景透明。GIF图片如果背景色设置为透明,它将与浏览器背景相结合,生成非矩形的图片。

  GIF格式支持动画。在Flash动画出现之前,GIF动画可以说是网页中唯一的动画形式。GIF格式可以将单帧的图象组合起来,然后轮流播放每一帧而成为动画。虽然并不是所有的图形浏览器都支持GIF动画,但是最新的图形浏览器都已经支持GIF动画。

  GIF格式支持图形渐进。渐进是指图片渐渐显示在屏幕上,渐进图片将比非渐进图片更快地出现在屏幕上,可以让访问者更快地知道图片的概貌。

  GIF格式支持无损压缩。无损压缩是不损失图片细节而压缩图片的有效方法,由于GIF格式采用无损压缩,所以它更适合于线条、图标和图纸。

  GIF格式的缺点同样相当明显。索引颜色是历史遗留的产物,在DOS下的老游戏几乎无一例外的采用索引颜色,这种格式本来早就应该淘汰了。但是由于带宽的限制,GIF从DOS时代红到了Internet时代。GIF这种索引颜色格式最大的缺点就是它只有256种颜色,这对于照片质量的图片是显然不够的。

  JPEG代表Joint Photograhic Experts Group(联合图像专家组),这种格式经常写成JPG,JPG图片的扩展名为jpg。

  JPG最主要的优点是能支持上百万种颜色,从而可以用来表现照片。此外,由于JPG图片使用更有效的有损压缩算法,从而使文件长度更小,下载时间更短。有损压缩会放弃图像中的某些细节,以减少文件长度。它的压缩比相当高,使用专门的JPG压缩工具其压缩比可达180:1,而且图像质量从浏览角度来讲质量受损不会太大,这样就大大方便了网络传输和磁盘交换文件。JPG较GIF更适合于照片,因为在照片中损失一些细节不像对艺术线条那么明显。另外,JPG对照片的压缩比例更大,而最后的质量也更好。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  但是从长远来看,JPG随着带宽的不断提高和存储介质的发展,它也应该是一种被淘汰的图片格式,因为有损压缩对图像会产生不可恢复的损失。所以经过压缩的JPG的图片一般不适合打印,在备份重要图片时也最好不要使用JPG。还有,JPG也不如GIF图像那么灵活,它不支持图形渐进、背景透明,更不支持动画。

  PNG是20世纪90年代中期开始开发的图像文件存储格式,其目的是企图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format,PNG)名称

来源:https://www.tulaoshi.com/n/20160219/1612455.html

延伸阅读
轮廓/区域关系是一种最基本的视觉感知法则。 轮廓即感知元素内部与外部的区分(我们可以理解轮廓为无限精细的线段)。 讨论 贴近 Proximity 当多个可见元素出现时,眼睛和大脑配合起来,倾向于根据它们的贴近和靠近关系进行分组。 这些圆形在你的视觉中分为几组? 元素与另外的元素越贴近,用户越从视觉上认为它们团结的越紧密(可以...
用Authorware开发多媒体作品,自然不能少了图片的显示。通常我们是用框架图标,把要显示的图片依次导入。这样做非常麻烦,每一幅图片要依次导入,逐个设置显示方式,这且不说,万一下次要显示不同的图片时,还得重新导入、设置,非常烦琐。那么,能不能让Authorware显示指定文件夹里的图片呢?这样,就用不着每次都要导入了,只要指定图片所在...
标签: Web开发
这个CSS书写格式是我自创的,常有朋友提出异议,这里做个简单总结: 分类,一个模块或者同类功能定义为一类定义,每类定义之间用段落隔开; 分级,每类定义中的每个定义语句,根据结构或语意级别使用Tab缩进纵向对齐; 分断,每个定义内的每个属性定义之间,用分号+空格隔开,注意定义语句与分号间无空格,{}内前有空格而后无空格; 连排,...
网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担。 以设计师最常用的 Photoshop 以及 Illustrator 为例,都提供了「储存为网页用」...
很久以前一直到现在,有好多网友问过我类似的问题,尤其是拷贝了本站的一些图形图像特效代码后,总是图片显示不出来等问题出现,在这里专门为这些初学者写一篇相关的教程,如果您没有这方面的疑问,请自行走开! 关于网页中应用图像的问题,也就是网页中图像标记的应用,下面给大家总结一下! 1)图像标记概述。 如果网页只有文字而没有图...

经验教程

922

收藏

9
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部