在新网站设计方面，我一直在寻找自适应图像/响应式设计问题的解决方案。
我提出一个“解决方案”这么简单，必须有一些明显的问题，它隐藏在明显的视线中。在我计划依赖此解决方案的公司网站重新设计之前，我想要求帮助指出问题或彻底揭穿我的想法。
请考虑：http://jsfiddle.net/exXgz/1/
在模仿移动设备宽度时，更改浏览器的宽度，以从适当大的图像（1440px宽，16kb）到小（200px宽，4kb）查看图像“缩放”。
对于需要动态缩放的每个图像，该技术需要两行CSS - 在我的例子中，只是画廊中的BIG。所有图像都以适当缩放（纵横比）的透明gif开始，并指定一种独特的样式来指定填充透明区域的“背景”图像。
然后根据浏览器宽度定义CSS媒体查询，并相应地加载/交换背景图像。没有服务器端代码，需要JS或PHP。
我能想到的第一个问题：如果不支持/不加载CSS，页面将不会降级。对这个问题不太感兴趣，因为我认为这将是非常罕见的。
查看使用Safari加载的页面资源，只显示满足@media查询的背景图像。这意味着iPhone用户不会下载这两个图像，并且基本上使这种技术无用。
你怎么看？这是漫长的一天 - 我错过了一些破坏这个想法的东西？编辑：更改了jsFiddle以在IE9 / Win7中工作，这是我现在可以测试的唯一版本的Windows。