сделать изображение не загруженным в полном разрешении, когда на меньшем

Question

Привет У меня есть фон на моем сайте, но это изображение размером 8 КБ, которое загружается вечно, когда я нахожусь на медленном 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");
    }
}