在较小的显示器上使图像不以全分辨率加载

Question

您好，我的网站上有一个背景，但它是一张 8k 图像，当我使用慢速 Wi-Fi 时，它需要很长时间才能加载。另外，如果我在 phone 上，它没有 8k 屏幕，所以这无关紧要。那么有没有一种方法可以在我使用较小的显示器时不加载全分辨率？

Answer 1

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

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

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