网页设计中图片格式的选择

网页设计中,切图输出将绘制完成的原始图稿转换成网页用的图片格式的重要步骤。选择适合的图片格式不但可以让设计得到合理的显示效果,还可以有效地控制图形文档的大小,节省下载时间、有效的减少服务器的负担。
Photoshop 以及 Illustrator都提供了「储存为网页用…」的功能。与普通的存盘模式不同,该功能提供了图形文件输出的质量调整、档案大小控制等针对网页图文件需求的选项:

 

许多人都知道网页设计中最常用的格式不外乎 JPG、GIF、PNG 等格式,但并非所有的人都知道他们之前的实际差别,何时该选择何种格式。

 

JPEG

JPEG 的扩展名为 .JPG。几乎每台数字相机、照相手机都可以输出 JPEG 格式的图档。JPEG是一种使用破坏性压缩(lossy compression)的图档格式,虽然图档的内容都会遭到破坏,在肉眼辨识下并不明显,但却可以有效的降低图档的档案大小。
JPEG 非常适合作为储存像素色彩丰富的图片,这些图片即使有些微的失真也不容易轻易的察觉,反过来JPEG 并不适合用来储存线条图,图标或文字等等有清晰边缘的图片。

GIF

Gif 在许多特性与表现上都与 JPEG 有着不同的特性。GIF 使用无损压缩格式(Lossless Compression),但却限制了色彩表现能力,能够有效地节省档案尺寸。GIF 只拥有 8 位的颜色深度信息,即256 色。当图片中出现的色彩在 256 色以内时,使用 GIF 可以得到相当好的输出质量,并兼顾了文档大小。因此 GIF 非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出。
另外 GIF 同时还支持透明背景以及动画图档格式,几乎 100% 的浏览器都支持它。
当图片拥有丰富的色彩时,并且没有明显锐利反差的边缘线条时,选择 JPEG 可以得到最好的输出结果,例如照片就是最好的例子:

 

(左图:Photoshop 输出 JPEG 默认值:品质:高,压缩质量 60%、优化输出。右图:Photoshop 输出 GIF 默认值:256色、扩散性混色)
当图片是拥有明确边缘的线条图,没有使用太多色彩,或可能需要透明背景时,GIF 是很完美的选择,文档小、画质又精美。

 

(上图:Photoshop 输出 GIF:64色、扩散性混色。下图:Photoshop 输出 JPEG 默认值:品质:高,压缩质量 60%、优化输出)
PNG
PNG是为了作为 GIF 的替代方案的,作为做新开发的影像传输文件格式,PNG 同样使用了无损压缩格式。PNG 分为 PNG-8 以及 PNG-24 两种格式,PNG-8 的特性很接近 GIF,支持 256 色以及透明背景的特性。而 PNG-24 则支持了多达 160 万个色彩。
虽然 PNG 不支持动画,但是 PNG-24 支持了Alpha 透明效果,就是使用 PNG 输出图档时,可以有效的支持不同的透明度效果。这张图片其实是使用了三张 PNG-24 的图片在网页中排版出来的效果:

作者: 南昌蓝爵网络科技有限公司
原文:
版权声明: 原创作品,允许转载,转载时请务必以超链接形式标明文章出处 、作者信息和本声明。否则将追究法律责任。
Tags: 网页设计  
相关文章

网页设计知识  (2015-9-7 12:16:58)

网页设计的基本流程  (2015-8-28 10:8:46)

网页设计图像格式知识  (2015-8-26 10:10:42)

基本的网页设计工具前台页面技术  (2015-8-26 9:37:9)

从网页设计的角度谈SEO优化  (2015-3-8 12:21:27)

网页设计新人找工作应该注意哪些方面  (2014-6-16 11:19:53)

网页设计公司有关SEO七宗罪  (2009-9-10 22:30:49)

最新发表
随机文章

Copyright @ 2010,All Rights Reserved

南昌蓝爵网络科技有限公司 版权所有

赣ICP备09156801号