响应型网站在云中的动态图像调整

Question

我有一个响应(RWD)网站，可以在移动设备上正常工作。我的问题是，在智能手机上，图片有点“笨重”，而在旧手机上，则显得太大了。我知道有很多离线或在线的工具(比如：http://www.resizeyourimage.com/)可以调整图片的大小，我知道我可以使用GD等工具来滚动自己的图像大小(这里是PHP)，但我想知道这里是否有人知道自动调整图像大小的方法。例如，通过某种类型的代理传递它们，例如：

320/http://myserver/mypic.jpg“/>

免费的服务更好。

这样，我就不必对旧图片进行改造，也不必提供同一张图片的多个版本。

我希望我的问题有意义..。

Answer 1

你应该去看看WURFL图像跟踪器。和你描述的差不多。您可以通过以下代理引用这些图像：

    <img src="//wit.wurfl.io/[full-url-to-your-image]">

然后，代理将检测用户代理的屏幕大小，并相应地调整图像大小。此服务还带有一些参数，允许您显式设置屏幕大小的高度、宽度和百分比。

Answer 2

有许多这样的服务，以及类似的以前有人问过问题。

所有可靠的解决方案也需要一点客户端javascript。Cookie在第一个页面加载时不起作用(这是其中的大多数)，如果您使用断点执行RWD，嗅探会提供无用的数据。除了纤细(和标签解决方案)，大多数将下载每个图像的两个副本(或更糟糕的是，失败的可访问性和SEO要求)。

我喜欢DRY &CSS友好的Slimmage.js，因为它的作者，但也有皮图为那些谁想要艺术方向的支持(并愿意处理由此产生的标记复杂性)。两者都可以与任何符合RIAPI的服务器端模块一起使用，如ImageResizer (作者声明也适用于此)。

如果您可以访问Windows (或linux/mono)服务器，考虑一下自我托管。

动态成像SaaS产品定期出现和失败，因此有一个备份计划，以取代URL如果您的SaaS不符合RIAPI。如果你的HTML不是动态的或者不能被后处理的，你会有.有趣的。

一些服务(免费或测试版)：

• CDNConnect (基于ImageResizer的兼容RIAPI的第三方服务)
• BoxResizer (免费，但正常运行时间没有保证)
• 斯基什
• 雷西佐

一些非免费(和不兼容)服务

• http://www.resrc.it/pricing/us
• https://responsive.io/plans#pricing-list
• https://www.maikoapp.com/
• 价格

Answer 3

您可以使用的一个图像调整服务是https://gumlet.com。您可以使用任何图像源与它，并调整大小的图像完全根据您的需要。

例如，要获得300 px的图像宽度，可以编写

https://subdomain.gumlet.com/image.jpg?width=300

我在Gumlet工作。