« 上一篇下一篇 »

图像优化之Favicons

Favicons命名为favicon.ico的小图像保存在网站根目录,可以显示在浏览器地址栏上,就在网络左面。

    这个页面组件经常被忽视,因为它很小,而且推测是可以被缓存的。但是缓存还没有像我们想象得那么普遍。对于任何组件都是这样,当然favicons也不例外。在所有页面中,只有9%使用它的favicon。

    对于favicon来说,有几点可以明显地提高性能:

    *确定建立了Favicon。因为不管怎么样,浏览器都会请求这个文件,没有什么理由返回一个404错误,尤其当你的404处理程序需要消耗数据连接或其他昂贵资源的时候。

    *考虑为favicon添加一个expires头。你不能将/favicon.ico设置为“永远”缓存,因为这样当你决定对它进行修改时,却无法修改文件名称。但你仍旧可以缓存几个月,甚至一年。检查你的Favicon文件的最后修改时间,来判断你修改的频率。当出现了一些紧急情况,你可以通过 标签来修改文件名,这个会在下一条进行解释。

    *你可以通过在head中添加 标签来包含Favicon.这样情况下,你可以控制浏览器请求的URL,可以和预定义的/favicon.ico完全不同。

     http://CDN/myicon.ico/>

    这很棒,因为你可以从CDN上调用favicon,并将它设置为“永久”缓存,在整个网站共享相同的文件。但是还要考虑权衡,如果你参照这种做法,Firefox会在瀑布图的最开始就请求这个favicon,而不是在其他组件都下载完成之后才下载的。另一方面,如果你从/favicon.ico调用这个文件,是没有必要添加 标签。

    *保持较小的图标大小。ICO格式可以包含不同分辨率的图像;比如16×16、32×32等。这会增加图标文件的大小,所以最佳做法应该是只保留一个16×16图像。这样的文件大小通常在1KB左右。根据经验,如果你的图标大小大于1KB,应该还有改善的空间。

    *可以使用免费的Windows工具Pixelformer来对这种文件进行优化,可以尝试不同的调色板大小。

« 上一篇下一篇 »