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

Question

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

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

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

有什么更实用的方法来解决这个问题吗？

我想获得以下场景：

• 当用户上传图像时，我调整它的大小并将其上传到S3。
• CloudFront将直接调整大小的图像
• 当我添加另一个大小时，我希望CloudFront看到S3上缺少这个大小，并从我的网站中提取它。

我想不出有什么办法来实现这一点。任何帮助或分享最佳做法都将得到认可。

Answer 1

与其自己做这一切，不如使用映像调整服务，例如：

• Cloudinary
• 英吉斯

他们可以在飞行中调整图像的大小，这样你就不必自己创建和存储它们了。他们也可以操纵他们(旋转，水印，彩色)图像在飞行.录像也是！

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

• 动态调整大小(使用CloudFront缓存，但不需要任何大小调整的图像存储)，或
• 根据请求调整大小，并为以后的访问存储结果(较低的处理成本，但涉及存储成本)

不可能有CloudFront“看到这个大小在S3上丢失，并从我的网站从原点提取它”。(你也许可以用404页做一些花哨的事情，但这不值得花这么多功夫。)

Answer 2

现在做这个的人。这并不是每个人都能使用的，但我们刚刚从Imgix转向使用AWS的无服务器图像处理程序，以节省成本。如果您的图像是在S3上的，那么效果很好，如果它缺乏Imgix的功能，可能是一个很好的替代解决方案。