缓存和调整图像大小,而无需缩小或拉伸


caching and resizing images without shrinking or stretching?

Facebook和其他图像密集型网站如何在不缩小或扭曲缩略图的情况下保持完整图像的缩略图大小?

这些拇指

是原始拇指的裁剪版本并存储,因此当单击拇指时,它们会引用全尺寸图像。

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

理想情况下,我想裁剪每个图像以适应预设大小,而不会扭曲纵横比。 如果这可以即时完成,这是处理大量图像的有效方法吗?

使用 HTML 标记或 CSS 样式调整图像大小被认为是不好的做法。放大它们意味着质量差,缩小它们意味着您的用户必须下载比必要更大的文件,这会损害速度。

有一些库是为几乎任何语言或框架的图像大小调整和缓存而构建的。它们大多还具有裁剪功能,以保持标准的纵横比。对于PHP,看看基于GD/ImageMagick的phpThumb。

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

我不能直接代表Facebook,但大多数网站上传一个大图像,然后自动重新创建较小的预设大小(通常由脚本语言和某种库,如PHP/GD)并以类似的文件名模式保存,以便您可以使用尽可能少的带宽,缩短加载时间,并避免使用css操作图像。