Question

我有一个响应式（RWD）网站，可以在移动设备上正常运行。我的问题是图片有点像＃34;在智能手机上，在旧款手机上毫无用处。我知道有很多工具可以离线或在线（例如：http://www.resizeyourimage.com/）来调整图片大小，我知道我可以使用GD等推送我自己的图像缩放器（PHP这里），但我想知道是否有人这里知道一种自动调整图像大小的方法。例如，通过某种代理来管理它们，例如：

的http：// cloudservice / w_320 / HTTP：//myserver/mypic.jpg" /＆GT;

免费服务非常优先。

这样我就不用翻新旧图片，也不必提供相同图片的多个版本。

我希望我的问题有道理......

Answer 1

有许多此类服务，以及类似的question has been asked before。

所有可靠的解决方案还需要一小部分客户端javascript。 Cookie不适用于第一页加载（大多数加载），如果您使用断点进行RWD，则嗅探会提供无用的数据。除了slimmage（以及带有＆lt; noscript＆gt;标签的解决方案），大多数将下载每个图像的2个副本（或者更糟糕的是，失败可访问性和SEO要求）。

我赞成the DRY & CSS-friendly Slimmage.js作为作者，但对于那些想要艺术指导支持（并且愿意处理由此产生的标记复杂性）的人来说，还有Picturefill。两者都可以与任何RIAPI-compliant服务器端模块一起使用，例如ImageResizer（此处也适用作者身份免责声明）。

如果您可以访问Windows（或Linux / mono）服务器，consider self-hosting。

动态映像SaaS产品会定期出现和失败，因此如果您的SaaS不符合RIAPI，则应制定备份计划来替换URL。如果您的HTML不是动态的或无法进行后期处理，那么您将拥有......乐趣。

一些服务（免费或测试版）：

CDNConnect（符合RIAPI标准的第三方服务基于ImageResizer）
BoxResizer（免费，但无法保证正常运行时间）
Sqish
Resizor

某些非免费（和不合规）服务

Answer 2

你应该看看WURFL Image Tailor。就像你描述的那样工作。您可以通过以下代理方式引用图像：

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

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

Answer 3

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

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

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

P.S。我在Gumlet工作。

响应式云网站中的动态图像大小调整

3 个答案: