分类: web      标签:image optimize     

Web中图片的优化泛谈

图片占网站源码的很大一部分,有的甚至超过总量的50%,在不减少网站功能和增加处理复杂度的情况下,图片优化将大有可为。这里只是根据经验对工作中优化的方式进行讨论。

图片特点

首先要明确图形图像的概念。图形是一般是设计人员绘制的,线条颜色过渡很明晰,颜色数量较少(矢量图形);图像是真实的照片,包含真实世界中的色彩,颜色数量很大(位图)。按颜色数量区分,可以分为调色板图像格式和真色彩图像格式,前者包含28(256)种颜色,而后者包含224(1600多万),相应的,文件也就更大。Web中一般也是以此来衡量具体用哪种格式。

* 前面说的矢量图形和位图概念并不严格,只是一个类比

Web上常用的图片包括三类:GIF、JPG、PNG。

GIF

JPG

PNG

PNG图片包含许多子类,根据可以包含的颜色值(不是固定的几种,而是一张图片中的颜色值不超过这么多个即可)分为:

PNG8: 256色PNG别名

PNG24: 全色PNG别名

PNG32: 全色PNG别名

比较

GIF & PNG

毫无疑问,如果需要用到动画,GIF是唯一的选择。

PNG8 拥有GIF所有的特性,并且有更好的压缩比,除了特别小的GIF图片会更小,大多数情况下应该选择PNG8。另外PNG8也支持alpha透明,而且这个格式的透明度在IE6下表现为全透明,其他浏览器表现为渐变透明(PhotoShop中唯一不支持的PNG格式,可以在FireWork中导出该格式图片)。

JPG & PNG

JPG和PNG24、PNG32都可以包含足够表现现实世界中丰富色彩的数据,PNG更是能够支持多个级别的透明度,但是对于多色彩图,JPG具有更好的压缩比。尽管JPG是有损的压缩,即使在PhotoShop中选择100%的图片质量仍然会造成损耗,但是对于满足人眼需求足够了。PNG作为无损压缩格式,可以作为中间格式,待编辑完成后再转换成JPG格式,可以避免每次保存造成的损耗累加。

JPG适合多色彩但无需透明度的场合,全色PNG更适合作为中间格式,或在需要透明度时使用,相应的,全色PNG所占空间更大。

优化方法

  1. 最基本的,通过 PS 的 “导出web所用格式” 的切片,它会自动为我们做很大的优化
  2. 1. 过程中,通过导出前的选项降低颜色值(png/gif)、降低图片质量(jpg)来进一步减小图片大小
  3. 导出后,用其他工具进一步优化

    ImageAlpha 一个可以进一步优化png图片的工具,采用有所压缩

    ImageOptim 去掉图片头部信息等对表现无意义的数据,如果有版权,请不要清除

除了针对图片本身的压缩和数据进行优化,在切图之前就要整理好哪些图片可以合并,哪些只能拿出来,尽可能的应用 css sprite 技术,减少网站图片的数量。

总之,动画用 GIF,多色彩图片使用 JPG,剩下的 PNG 就足够了。甚至为了适应IE6,实现浏览器的平稳退化,可以使用具有Alpha透明度的 PNG8 格式图片。

-EOF-


blog comments powered by Disqus