如何在网站上管理不同的图像大小

Question

我有一个网站，可以容纳数千张图片。不仅如此，每个图像都有不同的大小，具体取决于您在网页中的位置 - 在列表页面上，图像显示为350x200矩形，侧边栏上的图片为100x100等。

因此，当用户将图像上传到网站时，我会保留原始图像，并为每种尺寸制作4个已调整大小的副本。因此，如果100个用户上传图像，结果将是500张图像。我无法想到不同移动设备的不同尺寸会发生什么......

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

是否有更实际的方法来实现这一目标？

我想实现以下方案：

• 当用户上传图片时，我会调整其大小并将其上传到S3
• CloudFront将拍摄直接调整大小的图像
• 当我添加另一个尺寸时，我希望CloudFront看到S3上缺少这个尺寸并从我网站的原点拉出来。

我想不出实现这个的方法。任何帮助或分享最佳实践都会受到欢迎。

Answer 1

您可以使用图片大小调整服务，而不是自己完成所有这些，例如：

• Cloudinary
• Imgix

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

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

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

不可能让CloudFront“看到S3上缺少这个大小并从我网站的原点中拉出来”。 （你可能能够用404页面做一些奇特的东西，但这不值得付出努力。）

Answer 2

对于现在这样做的任何人。它并不适合所有人，但为节省成本，我们刚刚从Imgix切换到使用AWS的Serverless Image Handler。如果您的图片在S3上，效果很好，如果缺少Imgix的功能，它可能是一个很好的替代解决方案。