做前端网速优化，开始使用Google的一个工具：Page Speed。推出时，介绍里就写道：
Page Speed最初是Google内部使用的改进网页设计的工具——它整合在Firefox的著名插件Firebug中。当用户运行Page Speed，可以立即获得如何改进网页载入速度的建议。Page Speed能自动为用户优化图像，提供可以发布在网页上的压缩图片，它也能识别JavaScript和CSS载入问题，帮助开发者减少浏览者等待网页展示的时间。
在firefox上安装使用后，发现这应该属于是Firebug和Yslow的补充，在YUI之前建立的那几条规则上增加了几条细节。其中有一条就是“Optimize Images”。
在这条里面Google的建议大致是这样的：
PNG在各个浏览器下都表现良好，图片size小，应该优先使用。
GIF适合用于图片尺寸小于10px × 10px且色彩不超过3种的小图标。或者你需要用到动画时，只能用GIF。
JPG，最好只用于照片类的图片，比如一些用户上传的照片等等。
然后针对我们自己网站对比了下这几条建议，发现那张进行过CSS Sprites处理的网站公用图片还是值得进行这种优化的。
可以采用的PNG格式是PNG-8，除了动画完全可以取代GIF，同时支持单色透明。
PNG-8格式比GIF格式，在一般网页需要的256色压缩比下，前者图片尺寸小得多（可以小5%-25%），下载速度更快。
但是这需要找到一个优秀的PNG压缩算法工具来压制图片，目前我习惯使用的Photoshop表现并不优秀。
OptiPNG：无损的PNG优化工具，基本上除了JPEG都能优化成PNG，在百姓网这种图片大小比较小的情况下OptiPNG的速度和效率都很不错，超过了Google使用的压缩工具。
pngnq：有损的PNG压缩工具，除了会导致个别颜色的丢失之外其他方面都非常出色，压缩率远超50%。如果无损的话这是很理想的工具。
浏览器支持，在IE6下PNG-24的半透明显示不正常，现在常用的是PNG-8。针对IE8及以上更高级浏览器，应该不吝于使用PNG-24。随着HTML5 CSS3的发展，GIF最终会消失吧。
网友评论