分享！网页设计中图片格式选择技巧

成都网站设计中，切图输出是指设计师将手边绘制完成的原始图稿转换成网页用的图片格式、并交由下一位人员网页排版的重要步骤。选择适合的图片格式不但可以将让成都网站设计得到合理的显示效果、甚至还可以有效的控制图档的档案大小，节省下载时间、有效的减少服务器的负担。
以成都网站设计师较常用的Photoshop以及Illustrator为例，都提供了「储存为网页用…」的功能。与默认的存盘模式不同，在这个模式中，软件提供了仿真图文件输出的质量调整、档案大小控制等针对网页图文件需求的选项：

公司主营业务：成都网站制作、做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出霞浦免费做网站回馈大家。

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

JPEG：
由于旧型计算机系统以及文件系统的限制，计算机档案文件名与扩展名被规定为8.3的格式，因此JPEG的附档名被缩写为.JPG。JPEG可以说是人们较熟悉的图档格式了，相信在数字相机普及的现在，几乎每台数字相机、照相手机都可以（甚至只能）输出JPEG格式的图档。JPEG是一种很典型的使用破坏性压缩（lossycompression）的图档格式，也就是说使用者每次进行JPEG的存档动作后，图档的内容都会遭到破坏，这个特性在肉眼辨识下并不明显，但却可以有效的降0图档的档案大小。
就如这些使用JPEG的设备一样，JPEG非常适合作为储存像素色彩丰富的图片、例如照片等等，这些图片即使有些微的失真也不容易轻易的察觉：而反过来说JPEG并不适合用来储存线条图、图标或文字等等有清晰边缘的图片
多次重复进行JPEG的图档的储存将会有效性地破坏图片中的细节。

GIF：
Gif在许多特性与表现上都与JPEG有着相对的特性。GIF使用无损压缩格式（LosslessCompression），但却限制了色彩表现能力、能够有效地节省档案尺寸。GIF只拥有8位的颜色深度信息，所谓的8位是指2的8次方也就是256色，当你的图片中出现的色彩在256色以内时，使用GIF可以得到相当好的输出质量、同时兼顾了档案大小。因此GIF非常适合用来表现图标、UI接口、线条插画、文字等部分的输出。另外GIF同时还支持透明背景、以及动画图档格式，并且几乎不用担心支持性的问题：几乎100％的浏览器都支持它。由于JPEG与GIF有着如此不同的特性，因此我们可以很轻易的选择何时该用哪一种格式来输出我们需要的图档。

当图片拥有丰富的色彩时，并且没有明显锐利反差的边缘线条时，选择JPEG可以得到较好的输出结果，像是照片就是较好的例子：

（左图：Photoshop输出JPEG默认值：品质：高，压缩质量60％、优化输出。右图：Photoshop输出GIF默认值：256色、扩散性混色）

当图片是拥有明确边缘的线条图、没有使用太多色彩、甚至可能需要透明背景时，GIF是很好的选择，档案小、画质又精美。

（上图：Photoshop输出GIF：64色、扩散性混色。下图：Photoshop输出JPEG默认值：品质：高，压缩质量60％、优化输出）

PNG：
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看起来很好，但是相应的当然就是档案大小的增加。另外还有就是浏览器支持度的问题，虽然现在几乎大部分的浏览器都支持了PNG-24格式，但不幸的是IE6是不支持透明PNG图档的，现在依然有相当的使用者在使用IE6或更早的版本，虽然比例会越来越少，但是设计师多少必须将其考虑其内，是否考虑使用GIF替代，或是在程序端透过script的方式来支持透明PNG格式。

标题名称：分享！网页设计中图片格式选择技巧
路径分享：http://cxhlcq.com/article/edhegh.html