Question

我一直在阅读有关制作智能响应网站的几个主题，然后介绍使用图片时遇到的问题，因为显然它会占用大量带宽（因为您可能会有一个适合桌面的图像）这可能是1080px，然后将其缩小到可能只有300px的移动设备，但它仍然与更大的文件大小相同）

我的问题是，在不同布局的可互换CSS中，您不能在其中定义图像吗？那么说，你有2个@media查询，你会有2个不同大小的图像来满足布局，这样可以占用更少的带宽（例如，你有一个1080px用于桌面网站，一个图像是300px用于移动网站，这将占用更少的带宽）

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

Answer 1

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

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

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

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

我希望这有帮助！

Answer 2

您可以使用媒体查询并将图片设置为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;
  }
}

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

为什么你应该考虑使用不同的图像？

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

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

2 个答案: