Image 使用CSS/HTML调整图像大小，还是保存图像的多个版本更好？

到目前为止，当一个用户上传了一张图片，我一直在保存它的几个不同版本，以供整个网站使用。随着网站的发展，所需尺寸的数量也在不断增加

目前，每个上传的图像大小约为6个新图像，并保存在服务器上

缺点是每次我需要创建一个新的尺寸（例如，现在，我正在为一个图像库创建一个新的尺寸），我必须循环浏览所有数千张图像，并为每个图像重新剪切一个新的尺寸

然而，当我开始的时候，这是一个避免动态调整图像大小的好方法，现在它开始变成一场噩梦

继续保存不同的大小，并处理开销是更好的做法，还是现在最好获得3个常规大小，并根据需要动态调整大小？

使用html/css“调整”图像大小（例如，指定高度和宽度）通常情况下，这不是您想要做的-它会导致缩放效果不佳的图像，并带有调整大小时产生的瑕疵，而且效率低下，因为用户下载的文件可能比实际需要的文件大得多

相反，拥有某种服务器端解决方案来允许动态调整大小可能是您想要的。我建议使用-结合您最喜欢的语言和一些web服务器voodoo的实现（例如，使用Apache的.htaccess），您可以轻松地让/path/to/yourimage.png？50x50调用调整大小脚本，该脚本调整图像大小，将其保存在缓存文件夹中，并将调整大小的文件输出到浏览器。这是更好的-你得到适当的调整大小，你的用户只下载确切的文件，他们需要，最终结果是缓存，所以你的调整大小的行动只发生一次。查看一个示例（在perl中）

编辑-如果您用您正在使用的服务器端语言/框架对此作出回应，我很乐意为您指出ImageMagick或其他适合您平台的缩略/调整大小实现的方向。

多个版本

有些浏览器根本无法很好地缩放这些东西，最终会导致图像中出现令人不快的起伏、糟糕的像素化等等

例外情况可能是，如果您知道所有图像都是照片。然后为您的大尺寸提供版本，但缩小也可以。但是如果它们有插图或文本，效果会很明显。

这是针对ASP.NET的，但允许您通过图像查询字符串动态调整大小的版本。TimThumb for PHP是众所周知的，可以尝试一下。

.resize {  
  width: 200px;  
  height : auto;  
}  

.resize {  
  width: auto;  
  height : 300px;  
}