当前位置:首页 > 网页美工设计

网页设计中如何选择正确的图片格式

   网页设计中,切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小,节省下载时间、有效的减少服务器的负担。

  相信许多人都知道网页设计中最常用的格式不外乎 JPG、GIF、PNG 等格式,但并非所有的人都知道他们之前的实际差别跟到底何时该选择何种格式。经常发生的情况是,选择 GIF 后的输出结果看起来变得很糟,于是 PNG (24)似乎突然间风行了起来,不论图档尺寸是不是因此多了好几倍。

  由于旧型计算机系统以及文件系统的限制,计算机档案文件名与扩展名被规定为 8.3 的格式,因此 JPEG 的附档名被缩写为 .JPG。JPEG可以说是人们最熟悉的图档格式了,相信在数字相机普及的现在,几乎每台数字相机、照相手机都可以(甚至只能)输出 JPEG 格式的图档。JPEG是一种很典型的使用破坏性压缩(lossy compression)的图档格式,也就是说使用者每次进行 JPEG 的存档动作后,图档的内容都会遭到破坏,这个特性在肉眼辨识下并不明显,但却可以有效的降低图档的档案大小。

  就如这些使用 JPEG 的设备一样,JPEG 非常适合作为储存像素色彩丰富的图片、例如照片等等,这些图片即使有些微的失真也不容易轻易的察觉:而反过来说 JPEG 并不适合用来储存线条图、图标或文字等等有清晰边缘的图片

  多次重复进行 JPEG 的图档的储存将会永久性地破坏图片中的细节。

  Gif 在许多特性与表现上都与 JPEG 有着相对的特性。GIF 使用无损压缩格式(Lossless Compression),但却限制了色彩表现能力、能够有效地节省档案尺寸。GIF 只拥有 8 位的颜色深度信息,所谓的 8 位是指 2 的 8 次方也就是 256 色,当你的图片中出现的色彩在 256 色以内时,使用 GIF 可以得到相当好的输出质量、同时兼顾了档案大小。因此 GIF 非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出。

  另外 GIF 同时还支持透明背景、以及动画图档格式,并且几乎不用担心支持性的问题:几乎 100% 的浏览器都支持它。

  由于 JPEG 与 GIF 有着如此不同的特性,因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档。

  当图片拥有丰富的色彩时,并且没有明显锐利反差的边缘线条时,选择 JPEG 可以得到最好的输出结果。

  PNG 最初的开发目的是为了作为 GIF 的替代方案的,作为做新开发的影像传输文件格式,PNG 同样使用了无损压缩格式,事实上 PNG 的开发就是因为 GIF 所使用的无损压缩格式专利问题而诞生的。

  PNG 分为 PNG-8 以及 PNG-24 两种格式,PNG-8 的特性很接近 GIF ,支持 256 色以及透明背景的特性。而 PNG-24 则支持了多达 160 万个色彩。

  虽然 PNG 不支持动画,但是 PNG-24 支持了Alpha 透明效果,这可以说是 PNG-24 最令人眼睛一亮的地方了。也就是说使用 PNG 输出图档时,可以有效的支持不同的透明度效果了。

  在大部分的情况下,设计师必须根据图片需求来选择不同的图档格式,并且对其做适当的调整。虽然 PNG-24 看起来很完美,但是相应的当然就是档案大小的增加。另外还有就是浏览器支持度的问题,虽然现在几乎大部分的浏览器都支持了 PNG-24 格式,但不幸的是 IE6 是不支持透明 PNG 图档的,现在依然有相当的使用者在使用 IE6 或更早的版本,虽然比例会越来越少,但是设计师多少必须将其考虑其内,是否考虑使用 GIF 替代,或是在程序端透过 script 的方式来支持透明 PNG 格式。

  网站设计中会运用到图片设计,很多图片的格式处理是非常需要注意的,图片格式关系到图片的大小,而图片大小占网页大小非常大的一部分,所以网页设计中的图片大小关系到网站的打开速度。在制作网页的过程是需要严格注重的。

  1、PDF格式,是Photoshop图像处理软件的专用文件格式,文件扩展名是.psd,也是Photoshop中新建图像的默认格式。它是唯一支持所有可用图像模式(位图、灰度、双色调、索引颜色、RGB、CMYK、Lab和多通道)参考线、Alpha通道、专色通道和图层(包括调整图层、文字图层、图层效果和图层蒙板)的格式,是一种非压缩的原始文件保存格式。网站设计中PSD文件有时容量会很大,但由于可以保留所有原始信息,在图像处理中对于尚未制作完成的图像,选用PSD格式保存是最佳的选择。

  当对一张照片处理完成后,保存时选择Pdf格式,能够保存各个图层,通道,蒙版等的所有信息,当再次打开时想要修改某个细节如:删除某个图层样式,修改某个调整图层或将某个Alpha通道作为选区载入等,都是很方便的。但是一般psd格式图像文件较大,不便于传输,所以一般采用这种格式保存作为作品的备份。

  2、GIF图片格式,GIF是一种调色板型(palette type)(或者说是索引型)的图片。它含有多达256种的颜色。每一个象素点都有一个对应的颜色值。因为这种格式不再存在专利权的问题

  GIF是一种无损压缩的格式,这意味着当你修改并且保存了图片的时候,它的质量不会有任何损耗。

  GIF格式也支持动画.在黑暗的web1.0时代,它导致了大量多余的昙花一现的“新”图片(blinking “new” images),循环的@符号(rotating @ signs),birds dropping,a email以及其他一些让人厌烦的东西的出现。在更加文明的web2.0时代,在等待一个更新页面的ajax请求的时候,我们仍然会看到 “loading”动画,网站建设但是也有一些比较讨人喜欢的东西,人们喜欢把它们放在自己的网络上。不管怎么说,如果你有需要,就可以使用动画支持。

  GIF也支持透明度,透明度的值是一种布尔类型数据。GIF图片里的一个象素要么完全透明,要么完全不透明。

  3、 PNG图片格式,PNG的图片又分为 PNG-8 、 PNG-24 两种,其中,PNG-8 与 GIF 类似,支持 256 色调色板 ,而 PNG-24 只支持 48 位真彩色,凡是 GIF 拥有的优势 PNG-8 都拥有,GIF 所没有的优势 PNG-8 也有,同样的文件,PNG-8 格式比 GIF 要小, PNG-8 的特点使得它在网站设计切图环节深受网站设计师的喜爱。PNG 可以以任何颜色深度存储图像,也支持高级别的无损耗压缩、支持伽玛校正,支持交错,受最新 Web 浏览器的支持,能够提供长度比 GIF 小30%的无损压缩图像文件,最高支持 48 位真彩色图像以及 16 位灰度图像,渐近显示和流式读写,深圳网站设计不足的是较旧的浏览器和程序可能不支持 PNG 文件。

  4、JPEG图片格式,是目前网络上最流行的图像格式,是可以把文件压缩到最小的格式,在 Photoshop软件中以JPEG格式储存时,提供11级压缩级别,以0—10级表示。其中0级压缩比最高,图像品质最差。即使采用细节几乎无损的10 级质量保存时,压缩比也可达 5:1。以BMP格式保存时得到4.28MB图像文件,在采用JPG格式保存时,其文件仅为178KB,压缩比达到24:1。经过多次比较,采用第8级压缩为存储空间与图像质量兼得的最佳比例。JPEG格式的应用非常广泛,特别是在网络和光盘读物上,都能找到它的身影。目前各类浏览器均支持JPEG这种图像格式,因为JPEG格式的文件尺寸较小,下载速度快。

  5、BMP图片格式,BMP是英文Bitmap(位图)的简写,它是Windows操作系统中的标准图像文件格式,在Windows环境下运行的所有图象处理软件都支持BMP图象文件格式。Windows系统内部各图像绘制操作都是以BMP为基础的。随着Windows操作系统的流行与丰富的Windows应用程序的开发,BMP位图格式理所当然地被广泛应用。这种格式的特点是包含的图像信息较丰富,深圳网站设计几乎不进行压缩,但由此导致了它与生俱生来的缺点--占用磁盘空间过大。所以,目前BMP在单机上比较流行。BMP位图文件默认的文件扩展名是BMP或者bmp(有时它也会以.DIB或.RLE作扩展名)。

  6、TGA图片格式: TGA的结构比较简单,属于一种图形、图像数据的通用格式,在多媒体领域有着很大影响,在做影视编辑时经常使用,例如3DS MAX输出TGA图片序列导入到AE里面进行后期编辑。

  其他还有些网页设计中比较冷门点的格式,如TIF、PCX等格式,一般就用的非常少,这里就不做一一介绍了。合理的运用好格式可以很好的控制好网页布局。

不知道学什么,免费为您解答所有疑惑
姓名不能为空
手机号码不能为空

上一篇:网页设计中div和span的区别是什么?

下一篇:交互设计在网页设计中的体现在哪里?

返回首页

在线咨询

在线报名

电话报名