网页图像优化技巧

设计之美

身为一个网页前端开发人员,不免要经常处理一些图片。如何使图片体积更小,质量又有保证是一个问题。

图像格式概念:

.gif格式适合于动画、透明等类型图片。如果要做透明背景的logo,可以考虑输出.gif格式的,但是要注意,.gif格式透明虽然是IE6也支持的,但是它所支持的透明度较差,应用在某些颜色背景上时可能会时图片出现毛刺和白边等。.gif也适用于图片颜色较为单一的时候使用。

.png格式是一种比较好的图片格式,根据支持的色位,又分为png-8和png-24。png-8较好的一点是透明度效果好,且也被IE6支持。如果输出为png-24格式的包含透明度的图片,那就会在IE6下失去透明度,成为白色背景。如果图片颜色不是很复杂,但是也不是很单一的话,试试png-8格式,一般会比.gif格式体积更小。

.jpg(jpeg)格式适用于颜色丰富的图片,比如产品图片,风景,人像摄影等。但是不支持透明度和动画。用PS输出此类图片时,一般质量设为60-70%就比较合适了,可以兼顾到质量和体积。

图片色彩的基本概念:

真色彩图像(jpeg、png24、png32),色彩比较丰富包含16777216种颜色。调色板图像gif、png8,色彩简单只能包含256种颜色。

如果把真色彩图像,错误地使用了gif或png8格式会,通常会有损视觉效果。

又如果把调色板图像,错误地使用了jpeg、png24、png32格式,通常会导致文件体积更大。

小尺寸图片,即使色彩丰富也可以使用调色板图像,因为256种颜色一般足够对小图片进行视觉还原,而肉眼对小图的敏感度也没有那么高。

图片处理工具:

ImageMagick 、Gifsicle : 服务器及批量压缩的好工具。

PNGGauntlet: 把GIF转换成PNG8,如果是GIF动画经转换后则成了静态的PNG8图片。对现有的PNG8、PNG24、PNG32进行二次压缩,把多余的数据块清除。

TweakPNG: 是一款PNG数据块检查工具,经压缩过的PNG一般保留的数据块不超过5个。

Fireworks与Photoshop: 相同的质量,Fireworks比Photoshop输出的图片体积更小。

本文为转载,原文作者:Gulu77,原文链接:http://blog.gulu77.com/?p=727

相关日志

留下足迹