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

Question

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

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

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

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

是继续保存不同的尺寸，只处理开销更好，还是此时获取 3 个通用尺寸，并根据需要动态调整它们的尺寸更好？

Answer 1

使用 html/css “调整大小”图像（例如，指定高度和宽度）通常不是您想要做的 - 它会导致缩放后的图像带有调整大小的伪影，并且效率低下，因为用户可能会下载更大的图像文件比他们实际需要的多。

相反，拥有某种服务器端解决方案来允许动态调整大小可能正是您想要的。我建议使用 ImageMagick - 结合您最喜欢的语言和一些网络的实现 -服务器 voodoo （例如，使用 .htaccess for Apache），您可以轻松地让 /path/to/yourimage.png?50x50 触发对调整大小脚本的调用，该脚本调整图像大小，将其保存在缓存文件夹中，并输出调整大小的文件到浏览器。这一切都更好 - 您可以正确调整大小，您的用户只下载他们需要的确切文件，并且最终结果被缓存，因此您的调整大小操作仅发生一次。查看Image::Magick： :Thumbnail 为例（在 perl 中）

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

Answer 2

多个版本。

有些浏览器根本无法很好地缩放这些东西，最终会导致图像不稳定、像素化不良等。

例外情况可能是，如果您知道所有图像都是摄影图像。然后为您提供更大尺寸的版本，但缩小尺寸也可以。但如果这些有插图或文字，效果就会很明显。

Answer 3

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

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