在较小的显示器上，图像无法以全分辨率加载

Question

[您好，我的网站上有背景，但是它是一张8k的图像，当我使用慢速Wi-Fi时，它需要永久加载。另外，如果我在手机上，则没有8k屏幕，所以没关系。那么，有没有一种方法可以使我在较小的显示器上无法加载完整分辨率？

Answer 1

对于背景图像，为每种屏幕尺寸存储不同的分辨率，并使用CSS媒体查询根据屏幕宽度设置背景url：

.element {
    background: url("...bg_large.jpg");
}

@media screen and (max-width: 768px) {
    .element {
        background: url("...bg_small.jpg");
    }
}