移动和 tablet 设备离最终统治世界越来越近, 网页设计和技术正在竞相适应越来越多的屏幕尺寸. However, 设计工具来应对这一现象带来的挑战带来了一系列全新的问题, 最近出现的一个流行词是 “响应网络”. 这是使网络在大多数情况下工作的挑战, 如果不是全部, 设备不会降低用户的体验. 而不是设计适合台式机或笔记本电脑的内容, 信息必须在手机上可用, 平板电脑或任何连接到网络的设备. 然而,这 响应式网页设计 事实证明，进化是一个艰难的过程，有时甚至是痛苦的过程.

而容纳文本信息几乎是微不足道的, 当我们考虑响应式图像等内容时，棘手的部分就来了, 信息图, videos, 诸如此类, 它们曾经只是为桌面设计的吗. 这不仅带来了正确显示内容的问题, 还有内容本身是如何通过不同的设备被消费的. 智能手机上的用户与台式机上的用户是不同的. 数据计划和处理速度也必须考虑在内. 谷歌已经开始强调 移动友好网站的搜索结果， 有一些推测 这将大大提高这些网站的网页排名. 早期的解决方案通过部署仅限移动的子域(和重定向)来解决这个问题，但这增加了复杂性，很快就过时了. (不是每个站点都能负担得起这条路线.)

对响应式网络图像的探索

此时此刻, 开发者和设计师必须确保他们的网站负载是优化的，以满足移动网站的用户. 超过20%的网络流量 现在的移动用户，数量还在不断上升吗. 图片占据了页面内容数据的最大份额, 减少这种负荷成为当务之急. 为了简化响应式设计图像的大小调整，已经做了一些尝试, 包括, 服务器端和前端解决方案. 讨论这些响应式图像解决方案, 我们首先需要了解目前图像链接的缺点.

The 标记只有直接链接到图像本身的源属性. 如果没有任何附加组件，它无法确定所需图像的正确类型.

难道我们不能在HTML中包含所有的图像大小，并使用CSS规则 显示:没有 除了正确的形象? 这是完美逻辑世界中最合乎逻辑的解决方案. 这样，浏览器就可以忽略所有没有显示的图像，理论上也不会下载它们. 然而，浏览器的优化超出了普通逻辑. 使页面渲染足够快, 浏览器甚至在必要的样式表和JavaScript文件完全加载之前就预先获取链接的内容. 而不是忽略用于桌面的大图像, 我们最终下载了所有的图像，导致更大的页面加载. 只使用css的技术只适用于作为背景图像的图像，因为这些图像可以在样式表中设置(使用媒体查询)。.

那么，网站该怎么做呢?

后端响应式图像缩放解决方案

禁止移动网站/子域名, 我们剩下嗅探用户代理(UA)，并使用它向用户提供正确大小的图像. 然而，任何开发人员都可以证明这个解决方案是多么不可靠. 新的UA字符串一直在不断出现, 使维护和更新一个全面的列表变得费力. 当然, 这甚至没有首先考虑到容易被欺骗的UA字符串的不可靠性.

自适应图像

然而，一些服务器端解决方案值得考虑. 自适应图像 对于那些喜欢后端响应式图像修复的人来说，这是一个很好的解决方案吗. 它不需要任何特殊的标记，而是使用一个小的JavaScript文件，并在其后端文件中完成大部分繁重的工作. 它使用PHP和nginx配置的服务器. 它也不依赖于任何UA嗅探，而是检查屏幕宽度. 自适应图像非常适合缩小图像，但当需要大图像时也很方便 艺术指导, i.e. 通过裁剪和旋转等技术来减少图像，而不仅仅是缩放.

Sencha Touch

Sencha Touch 另一个后端响应式设计图像解决方案, 尽管最好将其称为第三方解决方案. Sencha Touch将通过嗅探UA相应地调整图像大小. 下面是该服务如何工作的一个基本示例:

还有一个选项可以指定图像大小, 以防我们不希望Sencha自动调整图像的大小.

在一天结束的时候, 服务器端(和第三方)解决方案在发送正确的图像之前需要资源来处理请求. 这将占用宝贵的时间，从而减慢请求-响应过程. 一个更好的解决方案可能是由设备自己决定直接请求哪些资源, 服务器也会做出相应的响应.

前端解决方案

最近，浏览器端在处理响应式图像方面有了很大的改进.

The element 在W3C的HTML5规范中引入并批准了. 它目前还不能在所有浏览器上广泛使用，但不久之后它就可以在本地使用了. 在此之前，我们依赖JavaScript多边形填充元素. 对于缺乏该元素的旧浏览器来说，Polyfills也是一个很好的解决方案.

还有一种情况是 srcset 属性 可用于几个基于webKit的浏览器 element. 这可以在没有任何JavaScript的情况下使用，如果要忽略非webkit浏览器，这是一个很好的解决方案. 在其他解决方案达不到要求的情况下，这是一个有用的权宜之计, 但不应被视为全面的解决办法.

Picturefill

Picturefill 是一个填充库吗 element. 它是响应式图像大小和缩放问题的前端解决方案中最受欢迎的库之一. There are two versions; Picturefill v1 mimics the 元素使用 span 而pictufill v2使用 元素，并为遗留浏览器(例如, for IE >= IE9). 它有一些 限制和解决办法尤其是Android 2.3 -顺便说一下，这是一个例子 img srcset 属性来拯救. 下面是使用pictufill v2的一个示例标记:

为了提高数据计划有限的用户的性能，pictufill可以 结合惰性加载. However, 该库可以提供更广泛的浏览器支持，并解决奇怪的情况，而不是依赖于补丁.

Imager.js

Imager.js 库是由 BBC News 团队使用与pictufill不同的方法来完成响应式图像. 当pictufill试图带来 元素到不支持的浏览器，Imager.Js专注于只下载适当的图像，同时也密切关注网络速度. 它还集成了延迟加载，而不依赖于第三方库. 它的工作原理是使用占位符元素并用 elements. 下面的示例代码展示了这种行为:

渲染后的HTML看起来像这样:

浏览器的支持比pictufill好得多，但代价是它是一个更实用的解决方案，而不是一个前瞻性的解决方案.

源洗牌

源洗牌 从与其他前端库稍微不同的角度处理响应式图像问题. 它类似于“移动优先”的思想流派, 因此，它在默认情况下提供尽可能小的分辨率. 一旦检测到设备有更大的屏幕，它就会将图像源交换为更大的图像. 它感觉更像是一个hack，而不是一个成熟的库. 这对于移动站点来说是一个很好的解决方案，但对于台式机和/或平板电脑来说，这意味着不可避免地要进行双重资源下载.

其他一些著名的JavaScript库有:

• HiSRC 一个响应式图像的jQuery插件. 对jQuery的依赖可能是一个问题.
• Mobify.js -一个更通用的库响应内容，包括图像，样式表，甚至JavaScript. 它在资源加载之前“捕获”DOM. Mobify是一个功能强大的综合库, 但如果目标只是响应图像，则可能会过度使用.

Summary

在一天结束的时候，这是由开发人员决定的 响应式网页设计 图像方法适合用户群. 这意味着数据收集和测试将为采取的方法提供更好的思路.

总结一下, 在决定适当的响应式图像解决方案之前，下面的问题列表可以帮助您考虑.

• 旧浏览器是一个问题吗? 如果没有，考虑使用更现代的方法.g: Picturefill, srcset 属性)
• 响应时间是否至关重要? 如果没有，请使用第三方或后端解决方案.
• 解决方案应该是内部的吗? 第三方解决方案显然将被排除在外.
• 网站上是否已经有很多图片正在尝试向响应式图片过渡? 是否担心验证或语义标记(或者更确切地说是非语义标记)? 这将需要一个后端解决方案将图像请求路由到自适应图像之类的东西.
• 美术指导是个问题吗(特别是对于包含大量信息的大型图像)? 对于这种情况，像pictufill这样的库将是更好的解决方案. 此外，任何后端解决方案也可以工作.
• 是否担心缺乏JavaScript? 任何前端解决方案都是不可能的, 这就留下了依赖于UA嗅探的后端或第三方选项.
• 移动响应时间是否优先于桌面响应时间? 像Source shuffle这样的库可能更合适.
• 是否需要为网站的每个方面提供响应行为，而不仅仅是图像? Mobify.Js可能效果更好.
• 完美的世界已经实现了吗? 使用CSS-only 显示:没有 approach!