使用响应式设计节省移动客户端下载大图像答案

【问题标题】：Save mobile client from downloading large image with responsive design使用响应式设计节省移动客户端下载大图像
【发布时间】：2013-07-14 14:12:49
【问题描述】：

随着响应式设计现在越来越流行，响应式设计的缺点之一是移动客户端需要下载不需要的大图像，例如

在我的 iPhone 上页面缩放非常好，但是下载的图片是1500x550，这很浪费，速度很慢，而且对于某些用户来说，它会产生成本。

当我知道客户端是移动的时，不提供大图像的替代方法是什么？是否有任何现有的方法/库，所以我不需要编写自己的 UA 嗅探代码？

【问题讨论】：

【解决方案1】：

W3 工作组将创建响应式图像规范：

目前，您可以使用用 javascript 编写的 polyfill，它具有相似的语法，并且由同一个人根据自己的规范维护：

我已经对其进行了测试，我将在生产中使用它，因为它运行良好；）

希望对你有帮助

【讨论】：

【解决方案2】：

看看这篇文章，Media Query Asset Downloading。我发现将图像制作成包含在另一个元素中的背景图像效果最好。

这是一个非常常见的问题，也是一个很好的问题，目前还没有“最佳答案”。

这是Clown Car technique上的一篇文章

我希望这对您有所帮助。我很高兴您关心不同设备上的图像，这是一个经常被忽视的问题。

【讨论】：

【解决方案3】：

如果使用 Clown Car 技术，请参阅我的关于使其在 IE 中正常工作的说明： http://jona.ca/blog/notes-on-using-the-clown-car-technique-in-ie

【讨论】：