根据屏幕尺寸不同的图像，以提高性能/加载时间？ （网页设计）

Question

我想要在我的网站上显示一张大图，作为一种背景图片。它非常大并且需要大量的加载时间，因此在较小的屏幕上我想显示较小的图片以最小化加载时间，因为实际显示在较小屏幕上的图片无论如何都会很小，所以它将是一个浪费来加载大局。

我的问题是：我该怎么做？我有什么选择？我会为不同的屏幕分辨率使用不同的图片吗？我怎么知道谁在浏览我的网站（也就是说，我怎么知道屏幕尺寸）？

Answer 1

您可以使用媒体查询，这将允许背景图像根据网站正在查看的设备的宽度进行更改

#body {      
background: url('images/your_bg_small.png') repeat-x;
 } 

@media (min-width: 601px) {
 #body { 
   background: url('images/your_bg.png') repeat-x;
 }

}