博客 - html/css/xml/xsl

笔记:网站性能优化——图像优化

优化PNG格式的图像

推荐工具:Pngcrush(http://pmt.sourceforge.net/pngcrush/)

其他工具:PNGOUT,OptiPNG,PngOptimizer

剥离JPEG的元数据

什么是 元数据?

1.注释。

2.应用程序定义的内部信息(如photoshop)。

3.EXIF信息。

工具:jpegtran(http://jpegclub.org)

将gif转换成png

如果gif图像中不包含动画,那就转换到png。转换后还要记得用Pngcrush优化哦!

优化GIF动画

工具:Gifsicle(http://www.lcdf.org/gifsicle/)

在线优化图像——Smush.it

前面提到的事情它都能胜任,只是在JPEG上为了保留版权信息没有剥离元数据。

使用渐进JPEG格式来储存大图像

这个能让图像在浏览器中逐步进行渲染。要注意的是文件比较大时才考虑使用该方法。

避免使用AlphaImageLoader

增加了代码的维护成本,还会造成直接的性能损耗。替代方案是使用VML或者采用渐进增强思维。

避免对图像进行缩放

比如将一张400×400的图缩放至200×200。缺点是既降低了图片质量又增大了下载量。

不要忘了favicons和Apple触摸图标

让文件更小且被缓存。

标签:

写下您的看法

  • :em18:
  • :em12:
  • :em03:
  • :em08:
  • :em06:
  • :em05:
  • :em07:
  • :em15:
  • :em11:
  • :em16:
  • :em01:
  • :em17:
  • :em10:
  • :em13:
  • :em14:
  • :em02:
  • :em09:
  • :em04:

仅支持“a、abbr、strong、em、blockquote、code”几个简单的标签

使用腾讯微博登陆 使用新浪微博登陆