优化网站设计（二十九）：优化图片

前言

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。

作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site  （http://developer.yahoo.com/performance/rules.html），同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。 接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。

准备工作

为了跟随我进行后续的学习，你需要准备如下的开发环境和工具

1. Google Chrome 或者firefox ，并且安装 Yslow 这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你应该对这些浏览器的开发人员工具有所了解，你可以通过按下F12键调出这个工具。
2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解，本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第二十八条原则：Optimize Images （优化图片）。

我必须承认，我对图片的设计并不在行，研究也不深入。所以对于这一条原则，我主要是翻译一下原文的内容，并没有太多要演示的。

You can check the GIFs and see if they are using a palette size corresponding to the number of colors in the image. Using imagemagick it's easy to check using
identify -verbose image.gif
When you see an image using 4 colors and a 256 color "slots" in the palette, there is room for improvement.

你可以使用ImageMagick这个工具对gif图片进行检查，以确认它们是否还有优化的空间。这个工具如此强大，以至于它的使用可以用一本书的篇幅来写。而且事实上，确实有两本专门针对这个工具的书。这真是一个神奇的工具。

Try converting GIFs to PNGs and see if there is a saving. More often than not, there is. Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past. The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don't support variable transparency either. So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations). This simple imagemagick command results in totally safe-to-use PNGs:
convert image.gif image.png
"All we are saying is: Give PiNG a Chance!"

尝试使用PNG取代GIF图片。通常情况下，同等质量的图片，PNG会比GIF小一些。早些时候，可能因为部分浏览器的支持问题，PNG得不到推广，但这个问题显然目前已经不存在了。PNG唯一取代不了GIF的地方是动画，因为PNG不支持动画。这又何妨呢？使用GIF来做些简单的动画吧，而PNG来支持其他的图片（包括透明图片，这方面PNG应该比GIF更强一些）。

Run pngcrush (or any other PNG optimizer tool) on all your PNGs. Example:
pngcrush image.png -rem alla -reduce -brute result.png

如果你已经决定了采用PNG这种图片格式，那么在发布PNG图片之前，可以采用 pngcrush 这个工具对其进行优化。

Run jpegtran on all your JPEGs. This tool does lossless JPEG operations such as rotation and can also be used to optimize and remove comments and other useless information (such as EXIF information) from your images.
jpegtran -copy none -optimize -perfect src.jpg dest.jpg

好吧，最后得说说JPG(JPEG)格式的图片了。这种格式其实目前在网页中已经用得不太多，因为可以使用PNG格式。JPG(JPEG)格式的优点，在于它不仅仅是一个图片，它里面其实有很多附加的信息，以便支持很多特殊的操作（例如记录相片基本信息的EXIF，可以支持API进行读取），但也正是因为如此，它的体积通常较大，所以在网页中的使用已经日趋减少（可以考虑转换为PNG格式）。如果你一定要用，也建议使用jpegtran这个工具去除掉这些附加的信息，因为在网页中这些信息的作用基本是不存在的。