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

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

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

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

有没有更实际的方法来达到这个目标？

我想acheive以下情形：

当用户上传的图像，我调整它，并把它上传到S3
CloudFront的将被直接调整
图像。当我添加另一个尺寸，我希望CloudFront在S3上看到此尺寸缺失，并将其从我的网站的原点中拉出。

我想不出一种方法来实现这一点。任何帮助或分享最佳实践都会令人满意。

来源

2017-10-19 Nikolay Traykov

一个选项可能只是存储最高分辨率的图像，然后动态生成其他大小*“即时”*。我做了一个小小的PHP脚本，它显示了一些事情，除了将图像文件名以及宽度和高度作为参数传递并调用PHP的'imagecopyresampled（）'方法之一https://stackoverflow.com/a/25835507/ 2836621。另一个例子https://stackoverflow.com/a/30573825/2836621 –

谢谢你的建议。我忘了提及我完全是这样做的（请参阅我对约翰罗森斯坦答案的评论）。如果这是唯一的好解决方案，那么我会保持原样。我只是觉得有些东西是我想不到的。 –

而不是自己做这一切，你可以使用一个图像缩放服务如：

他们可以调整图像的即时如此你不必自己创建和存储它们。他们还可以即时处理它们（旋转，水印，着色）图像。影片也是！

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

调整大小的即时（使用CloudFront的缓存，但不要求缩放后的图像的任何存储）根据要求，或
调整大小和保存以供将来访问的结果（更少的处理费用，但涉及存储成本）

这是不可能有CloudFront的“看到这个尺寸上缺少S3和从我的网站原点把它”。（你可以用404页面做一些花哨的东西，但这不值得付出。）

来源

2017-10-19 23:47:33

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

否则，我做了大量研究，发现你在亚马逊之前所列的东西，但它很昂贵，有时甚至在你不使用时付费。 –

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

回答

相关问题