响应式网页设计，缩放图像；节省带宽？

Question

我一直在阅读一些关于制作响应式网站的主题，然后是使用图片时出现的问题，因为显然它会占用大量带宽（因为您将拥有一张适合桌面的图片可能是 1080 像素，然后将其缩小到可能只有 300 像素的移动设备上，但文件大小仍与较大的相同）

我的问题是，在不同布局的可互换 CSS 中，您不能在其中定义图像吗？也就是说，您有 2 个@media 查询，然后您将有 2 个不同大小的图像来迎合布局，这将占用更少的带宽（例如，您有一个 1080 像素的桌面站点和一个 300 像素的图像）移动站点将占用更少的带宽）

这种做法有错吗？或者这是一个可行的解决方案？有人可以解释这如何解决问题，就像我相信的那样吗？我想做一些响应式网站，但这对带宽很友好

Answer 1

您可以使用媒体查询并将图像设置为background-image 上的div 元素。

这里是：http://jsfiddle.net/qsByJ/

@media all and (min-width: 520px) {
  #demo{
      background-image:url(http://unreasonableatsea.com/wp-content/uploads/2012/03/demo-logo-large.png);
        height:439px;
        width:660px;
  }
}
@media all and (max-width: 520px) {
  #demo{
      background-image:url(http://i1.sndcdn.com/artworks-000043575260-xlr304-original.jpg?164b459);
        background-repeat:no-repeat;
        height:282px;
        width:425px;
  }
}

这样您就可以为不同的设备提供不同的图像。

您应该考虑使用不同图像的几点原因：

• 在较旧的设备上，大图像可能会使网站崩溃或使其移动速度非常慢，因为内存很小。
• 如果页面上有更多图像，性能会受到影响，因为在某些设备上，每次绘制时，图像都必须按比例缩小。
• 如果你有很多图片（例如社交网站），带宽消耗会大很多。

Answer 2

我认为这是一个很好的问题！

我自己也遇到过这个问题。经过几天的搜索，我设法找到了一个完美的解决方案。

查看图像的精灵表。这是您的所有图像都包含在单个图像中的地方，然后只需要发送一个图像请求。从而节省大量带宽。

更好的是，如果您以高分辨率制作精灵表并使其根据屏幕尺寸缩小，则不会发生像素化，从而为您提供所需的结果。

我希望这会有所帮助！