如何在网站上管理不同的图像尺寸

Question

我有一个网站要托管成千上万张图片。而且，每张图片的大小都不同，具体取决于您在网页上的位置 - 在列表页面上，图像显示为350x200矩形，在侧边栏上显示为100x100等。

因此，当用户上传一张图片到网站时，我会保留原始图片，并为每种尺寸制作4个缩小版本。因此，如果有100个用户上传图像，则结果将是500个图像。我甚至无法想象针对不同移动设备的不同尺寸会发生什么...

我开始使用CloudFront进行优化速度。当用户上传图像时，我会将原始图片和缩小的副本上传到Amazon S3桶中。但是，如果明天我决定添加另一个尺寸或更改现有尺寸，则必须运行一个脚本来删除旧的已调整大小的图像，并上传新的已调整大小的图像，这意味着“从S3获取原始文件，调整大小，上传新的大小”。这根本不实际。想象一下，当我对网站进行完全重新设计并且图像尺寸完全改变时，我需要运行一个脚本来将每个图像调整为新要求并删除旧图像。

是否有更实用的方法来实现？

我想实现以下方案：

当用户上传图像时，我会将其调整大小并上传到S3

CloudFront将获取直接调整大小的图像

当我添加另一个尺寸时，我希望CloudFront看到S3上缺少此尺寸，并从我的网站源中提取它。

我无法想出实现这一点的方法。任何帮助或分享最佳做法都将不胜感激。

- Nikolay Traykov

---

一个选择可能是只存储最高分辨率的图像，然后动态生成其他尺寸的图像。我写了一个小的PHP脚本来展示这种情况，除了你需要传递图像文件名和宽度、高度作为参数，并调用PHP的imagecopyresampled()方法之一。另一个例子可以参考https://stackoverflow.com/a/30573825/2836621。 - Mark Setchell

谢谢你的建议。我忘了提到我已经按照你的建议去做了（请看我对John Rotenstein答案的评论）。如果这是唯一的好解决方案，那么我会保持现状。我只是觉得可能还有一些我没有想到的东西。 - Nikolay Traykov

Answer 1

而不是自己完成所有这些工作，你可以使用像以下这样的图像调整大小服务：

• Cloudinary
• Imgix

他们可以即时调整图像大小，因此您无需自行创建和存储它们。他们还可以即时操纵它们（旋转、水印、着色）图像。视频也一样！

如果您选择不使用这样的服务，则可以创建自己的虚拟调整大小服务。主要选择是：

• 即时调整大小（使用CloudFront进行缓存但不需要任何调整大小图像的存储），或
• 根据请求调整大小并存储结果以供将来访问（处理成本较低，但涉及存储成本）

不可能让CloudFront“查看S3上缺少的此大小并从我的网站源拉取它”。（您可能可以在404页面上做一些花哨的事情，但这不值得努力。）

- John Rotenstein

---

谢谢您的回复！我已经做的是使用我的服务器作为源而不是S3。我没有将所有尺寸都上传到S3，只上传原始图片。然后，当CloudFront没有图片时，它会从我的服务器请求。我从S3获取原始图片，根据CloudFront的要求调整大小，就这样。我不喜欢这种方法，因为当我第一次尝试打开一张图片时，会有一些延迟。之后，CloudFront直接返回图片，并且一切都非常快速。只是那个第一次让我烦恼，但也许这是唯一的解决办法。 - Nikolay Traykov

除此之外，我做了很多研究，甚至在亚马逊之前就找到了你列出的内容，但是它价格昂贵，有时即使不使用也需要支付费用。 - Nikolay Traykov

Answer 2

对于现在正在进行这项工作的任何人来说，这并不适合每个人，但由于成本节约的努力，我们刚刚从Imgix切换到使用AWS的Serverless Image Handler。如果您的图像存储在S3上，并且可能缺少Imgix的某些功能，那么它是一个很好的替代方案。

- alexmcfarlane