使用媒体查询进行移动优化的背景而不是内嵌图像？

Question

Ive mobile通过媒体查询优化了我的网站.一切看起来我都喜欢它,但是不必要的图像(因为它们被css隐藏)被下载,减慢了页面加载时间.

对此最简单的解决方案似乎是使用背景图像替换尽可能多的内嵌图像.然后我可以用移动版本的媒体查询css隐藏div.

我知道这有潜在的缺点,在这篇文章中概述: 何时使用IMG与CSS背景图像？

因此,公司徽标,员工照片等将保留为内嵌图像.

我没有考虑过我的方法有什么问题吗？我已经阅读了很多关于移动优化的内容,特别是有关媒体查询的内容,我甚至没有听说过有人这样做过,尽管这似乎是一个非常明显的解决方案,其中图像可以是内联或背景.

注意,香港专业教育学院做了一些iPhone和Android的实验(即时通讯等待获得一些Blackberrys),我知道要停止下载背景图像我需要将显示无设置为div的父级,而不是背景图像本身的div.

注意2,在理想的世界中,网站可能首先被构建为移动设备,但在这种情况下(通常在其他情况下),原始网站的修改数量有限.

谢谢

Answer 1

不幸的是,对于你想要解决的问题,没有很好的答案.

首先,您可以选择将所有内容从img标签移动到css背景图像.如你所知,你必须小心这样做会失去语义.

但即使您可以移动到背景图像而不会丢失语义值,它仍然不会100%可靠.去年夏天我写了一系列测试.我上周重新测试了它们,为我们关于移动优先响应式网页设计的书中的章节做准备.测试位于http://www.cloudfour.com/examples/mediaqueries/image-test/.

不幸的是,Android失败了所有这些技术.您可以通过Blaze的移动测试看到它下载图像文件的多个副本:www.blaze.io/mobile/result/ ?testid = 111031_96_316

更新2011年11月3日:我正在努力调和我在Blaze上看到的内容与我亲眼使用相同设备的内容之间的不一致结果.在我的本地Nexus S上,它通过了第五次css测试,通过将它们放入媒体查询中来限制imgs.我看了apache日志并确认设备只下载一张图片而不是两张图片进行测试5. Blaze正在运行2.3.3.我的手机正在运行2.3.6.

这适用于Android 2.2,2.3和3.0.希望4.0将包含阻止此行为的webkit修复程序:bugs.webkit.org/show_bug.cgi？id = 24223

顺便说一句,这似乎与你在Android上测试设置父div显示:none的评论相冲突.如果你得到不同的结果,我很乐意听到它.

如果你把它们作为img标签,你有什么选择？在这个主题上,我写了一个多部分系列.本系列的第二部分深入介绍了不同的技术:http: //www.cloudfour.com/responsive-imgs-part-2/

同样,没有一个解决方案是伟大的.如果你想要一些简单而且大部分时间都可以工作的东西,我会选择adaptive-images.com.或者通过Sencha.io SRC路由图像,直到我们有更好的解决方案来解决这个问题.

顺便说一句,抱歉有这么多的链接实际上不是链接.这是我对stackoverflow的第一个响应,它只允许我包含两个链接.