背景图像在响应式网页设计中临时解决图像？

Question

因此，我意识到响应式网页设计中目前存在的一个主要问题是，您可能不需要下载大型图像，例如在手机上 - 导致严重的性能损失 - 您也可以通过条件加载获得用JS;所以我的问题是，我不能只将大部分图像作为背景图像加载到媒体查询中，并克服这个问题直到更好的事情出现？示例：

/* base styles */
 @media all and (min-width: 53.75em) {
 header .inner{
 background: url(‘../images/football_bg.png’) bottom right
no-repeat;
}

显然这完全是非语义的，但可以解决性能问题吗？

Answer 1

如果您真的关心语义，可以考虑使用自适应图像：http://adaptive-images.com/ 这里还有一篇关于图像解决方案和响应式设计的好文章。 http://css-tricks.com/which-responsive-images-solution-should-you-use/

Answer 2

是的，使用媒体查询和背景图像就像魅力一样，所以如果它非常适合您的项目，那么一定要使用它。

但是，并不总是可以使用背景图像。

如果是这种情况，一个选项是Adaptive Images，它将根据访问者的视口提供不同大小的图像。这很容易适应现有网站并检查它是否适合您。

如果你使用Foundation，另一种可能性就是他们刚刚发布了类似的东西，看起来非常有趣：Interchange

祝你好运！