缓存和调整图像大小而不缩小或拉伸？

Question

Facebook和其他图片密集型网站如何维护整个图片的缩略图大小而不缩小或扭曲缩略图？

这些拇指是否会裁剪原件的版本并存储，因此当点击拇指时，它们会引用完整尺寸的图像。

如果我只是尝试将它们限制在我的img标签中的预设尺寸，我的图像会被拉伸或缩小。

理想情况下，我想裁剪每个图像以适应预设尺寸而不会扭曲纵横比。如果可以动态完成，这是一种高效处理图像的有效方法吗？

Answer 1

使用HTML标记或CSS样式调整图像大小为considered bad practice。扩展它们意味着质量差，缩小它们意味着您的用户必须下载比必要更大的文件，这会影响速度。

为几乎任何语言或框架的图像大小调整和缓存都构建了库。它们主要用于裁剪，以保持标准的纵横比。对于PHP，请查看phpThumb，它基于GD / ImageMagick。

生成的图像大小调整版本保存在缓存文件夹中，因此每次请求图像时都不需要重新生成它们。这样，性能几乎与提供静态文件一样好。如果缓存中存在已调整大小的版本，则唯一的开销是小检查。

Answer 2

我不能直接为facebook说话，但是大多数网站都会上传大图片，然后会自动重新创建较小的预设尺寸（通常是通过脚本语言和某种类型的库，如PHP / GD）并保存为类似的文件名模式，这样你就可以使用尽可能少的带宽，改善加载时间，避免用css操纵图像。