html - 根据屏幕尺寸使用不同的图像以提高性能/加载时间？ (网页设计)

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;
 }