Web 前端优化最佳实践之图象篇

作者: Fenng | 可以转载, 转载时务必以超链接形式标明文章原始出处和作者信息及版权声明

网址: http://www.dbanotes.net/web/best_practices_for_speeding_up_your_web_site_image.html

Web 前端优化最佳实践第六部分面向 图片(Image)，这部分目前有 4 条规则。在最近的 Velocity 2008 技术大会上，Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有参考价值。结合一起说一下。

1. 优化图片 (Optimize Images)

使用 GIF 、JPG 还是 PNG 格式的图片? 尽可能的使用 PNG 格式的图片，更多的功能，更小的尺寸(与 GIF 相比)。

对于 PNG 图片，考虑用 Pngcrush 或类似的工具进行优化。常见的工具如下表:

pngcrush http://pmt.sourceforge.net/pngcrush/
pngrewrite http://www.pobox.com/~jason1/pngrewrite/
OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/
PNGOut http://advsys.net/ken/utils.htm

对 JPEG 图片的优化工具：

jpegtran (http://jpegclub.org/)

必需要强调的是，图片设计的同学啊，请考虑设计面向 Web 的图片，不要动不动就设计超过可接受尺寸之外大家伙，这应该是一种习惯，而不是什么高超的技能，只需要记住就成了。

2. 使用 CSS Sprites 技巧对图片优化 (Optimize CSS Sprites)

之前提到过，简单的说就是"利用 CSS background 相关元素进行背景图绝对定位"，把多次 HTTP 调用变为一次调用，更多参考：CSS Sprites: Image Slicing's Kiss of Death

3. 不要在 HTML 中使用缩放图片 (Don't Scale Images in HTML)

更多的时候，可能是因为偷懒而没有***合适大小的图片，如果是批量处理图片的话，可能一条 ImageMagic 命令（convert ）就能搞定 。必须提及的是，看到太多的对图片拉伸很难看的页面，救救这些页面!

4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)

更小，可缓存，这两条可能都不是问题。问题是，太多站点根本没有 favicon.ico 。有的时候，判断独立域名的 Blog 是否专业，基本看一下是否有 favicon.ico 就差不多了。