图片优化工具

在网页中运用图片的成本并非新的问题，只是我们现在把焦点放在了js脚本对页面加载的阻碍影响当做了罪魁祸首。
Mike Taylor 曾经在throneofjs大会上关于前端性能优化上提出的观点：

The solution to worrying about JS lib/framework size: include one less .jpg on your site. #throneofjs.
11:05 PM - 22 Jul 2012

在进行图片优化之前，我们首先应该能够选择合适的图片类型，这样可以适当地减少图片的体积。这也是能够后续优化的前提。选择合适的图片类型最主要的就是考虑图片里面的色彩多寡，其中有一些经验可以借鉴：

对于图片优化的最优方式，就是能够尽可能地实现自动化，这样就可以避免我们分别对每张图片进行单独处理。

下面就介绍一些这样的工具吧！

Recompressing JPG/PNG/GIF to save on bytes:
- OptiPNG/jpegtran/gifsicle: grunt-contrib-imagemin
- ImageOptim-CLI companion: grunt-imageoptim
- Convert to WebP: grunt-webp
Spriting to reduce HTTP requests:
- grunt-spritefiles
- grunt-montage
Prescaling (normalization) to avoid excessive image resize/decode work:
- grunt-imageNormalize
- grunt-image-resize
Responsive image generation/handling:
- Generate multi-resolution images: grunt-responsive-images
- Clowncar technique: grunt-clowncar
Inline images as data URIs (careful as costly on mobile):
- grunt-image-embed

当然，并不是所有人都使用grunt，那么我们就来看一下独立的图片优化工具，你可以根据自己的需要来选择。