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

【问题标题】：How to manage different image sizes on a website如何在网站上管理不同的图像尺寸
【发布时间】：2018-03-31 18:28:24
【问题描述】：

我有一个要托管数千张图片的网站。不仅如此，每张图片的大小还取决于您在网页中的位置——在列表页面上，图片显示为 350x200 矩形，侧边栏图片为 100x100 等。

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

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

有没有更实用的方法来实现？

我想实现以下场景：

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

我想不出一种方法来实现这一点。任何帮助或分享最佳实践将不胜感激。

【问题讨论】：

一种选择可能只是存储最高分辨率的图像，然后动态生成其他尺寸“on-the-fly”。我做了一个小的 PHP 脚本来显示这类事情，除了你将传递图像文件名和宽度和高度作为参数并调用 PHP 的 imagecopyresampled() 方法之一 stackoverflow.com/a/25835507/2836621 。另一个例子stackoverflow.com/a/30573825/2836621
感谢您的建议。我忘了提到我正是这样做的（请参阅我对 John Rotenstein 回答的评论）。如果这是唯一好的解决方案，那么我将保持原样。我只是觉得有一些我想不到的东西。

标签： image image-processing amazon-s3 amazon-cloudfront

【解决方案1】：

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

他们可以即时调整图像大小，因此您不必自己创建和存储它们。他们还可以即时操作（旋转、水印、着色）图像。还有视频！

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

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

不可能让 CloudFront “看到 S3 上缺少此大小并从我的网站的源中提取它”。（你也许可以用 404 页面做一些花哨的事情，但这不值得。）

【讨论】：

感谢您的回复！我已经做的是将我的服务器用作源而不是 S3。我不会将所有尺寸上传到 S3，只是将原始尺寸上传到 S3。然后，当 CloudFront 没有图像时，它会从我的服务器请求它。我从 S3 获取原始文件，根据 CloudFront 的需要调整原始文件的大小，仅此而已。我不喜欢这种方法，因为当我稍后第一次尝试打开图像时，会有一些延迟。之后，CloudFront 直接返回它们，一切都非常快。只是第一次让我烦恼，但也许这是唯一的解决方案。
否则，我做了很多研究，发现你列出的东西甚至在亚马逊之前，但它很贵，有时你即使不使用也要付费。

【解决方案2】：

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

【讨论】：