Как загрузить форматы изображений на основе поддержки браузера с помощью CSS?

Я хотел бы использовать формат изображения WebP в моем свойстве CSS background-image. Но поскольку WebP является довольно новым и все еще не поддерживается всеми браузерами, новыми и старыми, я также хотел бы добавить поддержку версии этого изображения в формате JPEG в качестве запасного варианта.

Я знаю, что могу использовать тег <picture>, чтобы сделать это, например:

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg">
</picture>

И это заставит браузер загружать первый поддерживаемый формат. Но могу ли я каким-то образом добиться того же эффекта, используя только CSS, поскольку я устанавливаю фоновое изображение с помощью свойства background-image? Я знаю, что могу выбирать изображения в зависимости от размера экрана с помощью @media запросов, но как мне загружать изображения на основе поддержки браузера?

Я пытался найти решение, но не нашел. Сообщите мне, если это дубликат и решение уже существует.

Спасибо.


html css background-image cross-browser webp
person Sajib Acharya    schedule 08.04.2019    source источник

Ответы (2)


arrow_upward
-1
arrow_downward

Используйте 2 фоновых изображения: одно с JPG или PNG, другое с WEBP, браузер автоматически выберет лучшее.

Нашел этот код в коде: Робин Рендл

CSS:

element {
  width: 50vw;
  height: 100vh;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/cust-housegreening-pup%402x-4cf7ada520811031a97bee12c06d9e9367f811bd86255ea60d40aa809cf58801.jpg');
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/cust-housegreening-pup@2x-4cf7ada520811031a97bee12c06d9e9367f811bd86255ea60d40aa809cf58801.webp');
}

https://codepen.io/robinrendle/pen/ORmzJY

person Galo    schedule 19.06.2019
comment
Могу подтвердить, что этот подход НЕ работает. При использовании этого подхода и FireFox, и Google Chrome загружают .webp версию изображения и отлично работают. Но в Safari (v12.1.1), который не поддерживает WebP, это не работает. Safari по-прежнему пытается загрузить формат .webp и не показывает изображение. Это предполагаемое поведение CSS, поскольку при использовании нескольких атрибутов background-image браузер всегда загружает последнее упомянутое изображение. Даже код, который вы предоставили, не работает в Safari. - person Sajib Acharya; 20.06.2019
comment
Извините за это, протестировал это в текущем браузере, единственный способ - использовать JS для обнаружения поддержки webp и добавить класс тела, чтобы все элементы с фоновыми изображениями можно было переключить на webp - person Galo; 27.08.2019
comment
вы можете обратиться к этой ссылке: css-tricks.com/using-webp-images и это: freecodecamp .org / news / - person Galo; 27.08.2019

arrow_upward
-1
arrow_downward

Вместо этого используйте CSS @supports.

.yourclass {
    background: url("image.jpg") no-repeat center / contain;
}

@supports (background-image: url("image.webp")) {
    .yourclass {
        background: url("image.webp") no-repeat center / contain;
    }
}

Не волнуйся. Откройте инспектор, и вы заметите, что браузер не загружает оба изображения.

На что следует обратить внимание:

  • Обратите внимание, что вы должны объявить webp версию после jpg, или каскадный поток должен победить.
  • Параметры background-repeat, background-position и background-size предназначены только для примера.
person ed1nh0    schedule 15.10.2019
comment
Выглядело многообещающе, но, тестируя Safari, я обнаружил, что, несмотря на то, что он не может использовать webp, он будет использовать правила внутри части @supports. - person Bemmu; 29.01.2020
comment
Я также тестировал в Safari, этот ответ неверен. Я думаю, @supports только проверяет, доступно ли это правило CSS и действительно для текущего браузера, но не скажу вам, может ли ресурс быть успешно загружен. - person bambooom; 06.03.2020
comment
@bambooom с какой версией Safari вы тестировали? caniuse.com/#feat=css-featurequeries - person ed1nh0; 07.03.2020
comment
@ ed1nh0 Safari версии 13.0.5 (15608.5.11). Я не имею в виду, что @supports не поддерживается в Safari. Но я согласен с первым комментарием. Запросы этой функции @supports возвращают значение true для Safari 13, поэтому применяется правило url("image.webp"), но webp не может отображаться в Safari. - person bambooom; 10.03.2020