有些同学发现<img />标签可以指定图片的高度和宽度，而且在浏览器里面看起来确实是将图片缩放成想要的规格了，于是非常高兴，把这个“技巧”当成一个绝世秘籍，到处施展。

这个问题很严重，普遍存在于很多中小型网站。本来我们只需要一个规格为100x100的图片，却放置了一个500x500的图片，不仅会增加下载时间，还会加重浏览器负担，造成图片加载缓慢。网站或者CDN的流量也会大大增加，造成不必要的浪费。

著名的Yahoo关于网站性能的 best practice rules  中就有一条是： Don't Scale Images in HTML 。

问题的根源在于：页面对于图片规格的需求五花八门，而图片服务器却只有固定的一两种规格，而生成一种全新规格的图片成本很高。

SLIR解决了这个问题。

SLIR是一组PHP代码，将其部署到WEB服务器上，在URL中填写不同的参数，就可以在线生成相应规格的图片，并且实现了JPEG质量调整、裁剪、缓存等功能。使用也非常方便。

部署SLIR需要WEB服务器支持PHP 5.1.2或者更高版本，并且有GD模块，如果是Apache HTTPD服务器，部署就更方便了。具体的部署过程请参考官方文档。

举例说明一下引用图片的URL规则：

原图图片URL：http://example.com/img/1.jpg

等比例缩放，宽度为100px：http://example.com/slir/w100/img/1.jpg

等比例缩放，高度为200px：http://example.com/slir/h100/img/1.jpg

将图片裁剪为100x100px：http://example.com/slir/w100-h100-c1x1/img/1.jpg

据了解，这个程序的作者本身是一个摄影爱好者，应该算是专业人士吧，所以不用太担心缩放后的图片质量劣化。经过我的测试和分析，缩放后的图片质量挺不错，反正我看不出太大问题。

这组程序有一个潜在的问题，就是图片缓存只有一级目录，使用一段时间后，缓存目录中可能会积累大量文件，这对于系统性能和维护都是一个问题，稍后我会提交一个Patch修复这个问题。

更多有关资料可以参考：

https://github.com/lencioni/SLIR