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/ (refer: 教程)
•PNGOut http://advsys.net/ken/utils.htm
另请参见: Five Tips For the Effective Use of PNG Images
对 JPEG 图片的优化工具:
•jpegtran (http://jpegclub.org/)
必需要强调的是,图片设计的同学啊,请考虑设计面向Web的图片,不要动不动就设计超过可接受尺寸之外大家伙,这应该是一种习惯,而不是什么高超的技能,只需要记住就成了。
3. 不要在 HTML 中使用缩放图片 (Don’t Scale Images in HTML)
更多的时候,可能是因为偷懒而没有制作合适大小的图片,如果是批量处理图片的话,可能一条 ImageMagic 命令(convert )就能搞定 。必须提及的是,看到太多的对图片拉伸很难看的页面,救救这些页面!
4. 用更小的并且可缓存的 favicon.ico (Make favicon.ico Small and Cacheable)
更小,可缓存,这两条可能都不是问题。问题是,太多站点根本没有 favicon.ico 。有的时候,判断独立域名的 Blog 是否专业,基本看一下是否有 favicon.ico 就差不多了。