网站性能优化2-yahoo网站页面性能优化34条黄金守则-images

网站性能优化二---yahoo网站页面性能优化34条黄金守则---images
1.Optimize Images

优化图像

http://developer.yahoo.com/performance/rules.html#opt_images

你可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。 使用imagemagick中下面的命令行很容易检查：
identify -verbose image.gif
如果你发现图片中只用到了4种颜色，而在调色板的中显示的256色的颜色槽，那么这张图片就还有压缩的空间。
尝试把GIF格式转换成PNG格式，看看是否节省空间。大多数情况下是可以压缩的。由于浏览器支持有限，设计者们往往不太乐意使用PNG格式的图片，不过这都是过去的事情了。现在只有一个问题就是在真彩PNG格式中的alpha通道半透明问题，不过同样的，GIF也不是真彩格式也不支持半透明。因此GIF能做到的，PNG（PNG8）同样也能做到（除了动画）。下面这条简单的命令可以安全地把GIF格式转换为PNG格式：
convert image.gif image.png
“我们要说的是：给PNG一个施展身手的机会吧！”
在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。例如：
pngcrush image.png -rem alla -reduce -brute result.png
在所有的 JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作，同时它还可以用于优化和清除图片中的注释以及其它无用信息（如 EXIF信息）：
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

imagemagick：
http://www.imagemagick.org/

pngcrush：
http://pmt.sourceforge.net/pngcrush/

ImageMagick中文网站：
http://www.imagemagic.cn/

个人实践感觉比较好用的是，对于jpg文件：
去除多余信息、调节压缩比：
convert -strip -quality 75% input.jpg output.jpg

命令参数参考：
http://www.imagemagick.org/script/convert.php

关于ImageMagick可参考文章：
使用ImageMagick为你的网站减重(转)
http://www.oschina.net/bbs/thread/4373

（转）ImageMagicK速查
http://www.linuxeden.com/blog/?uid-196616-action-viewspace-itemid-7194

Optimizing PNG Images for Web Sites
http://www.graphics.com/modules.php?name=Sections&op=viewarticle&artid=756

2.Optimize CSS Sprites

优化CSS Spirite

http://developer.yahoo.com/performance/rules.html#opt_sprites

在Spirite中水平排列你的图片，垂直排列会稍稍增加文件大小；
Spirite 中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以便适用PNG8格式；
便于移动，不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100x100的图片为1万像素，而 1000x1000就是100万像素。


3.Don't Scale Images in HTML

不要在HTML中缩放图像

http://developer.yahoo.com/performance/rules.html#no_scale

不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要：
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
那么你的图片（mycat.jpg）就应该是100x100像素而不是把一个500x500像素的图片缩小使用。


4.Make favicon.ico Small and Cacheable

favicon.ico要小而且可缓存

http://developer.yahoo.com/performance/rules.html#favicon

favicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的，因为即使你不关心它是否有用，浏览器也会对它发出请求，因此最好不要返回一个404 Not Found的响应。由于是在同一台服务器上，它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序，例如在IE中当你在 onload中请求额外的文件时，favicon会在这些额外内容被加载前下载。
因此，为了减少favicon.ico带来的弊端，要做到：

文件尽量地小，最好小于1K
在适当的时候（也就是你不要打算再换 favicon.ico的时候，因为更换新文件时不能对它进行重命名）为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。

Imagemagick可以帮你创建小巧的 favicon。