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

Question

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

http://twitter.github.io/bootstrap/examples/carousel.html

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

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

Answer 1

看看http://www.w3.org/community/respimg/和http://responsiveimages.org/

这是一个 W3 工作组，它将为响应式图像创建规范：

http://picture.responsiveimages.org/

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

https://github.com/scottjehl/picturefill

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

希望这可以帮助

Answer 2

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

Answer 3

看看这篇文章，媒体查询资产下载。我发现将图像制作成包裹在另一个元素中的背景图像效果最好。

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

这是一篇关于小丑车技术的文章

我希望这能够帮到你。我很高兴您关心不同设备上的图像，这是一个经常被忽视的问题。