@thanos_universe

Как настроить WEBP для изображений в background-image?

В WP изображения выводятся в формате
<div class="post-image" data-style="background-image: url(https://...jpg);" style="background-image: url(https://...);"></div>


Реализуется через:
echo '<div class="post-image" data-style="'.esc_attr($image_bg).'">
- $image_bg - это background image ($image)

Как правильно прописать код в данном случае (чтобы было 2 картинки: 1 - webp, 2 - jpg). Скрипт modernizr будет выводить одну из них в зависимости от поддержки формата браузером (добавляет классы). В сети обычно предлагают что-то вроде
.no-webp #start{background-image: url('/resources/images/bg-1-0.png');}
.webp #start{background-image: url('/resources/images/bg-1-0.webp');}
но у меня немного сложнее все из-за премиум шаблона.
  • Вопрос задан
  • 438 просмотров
Пригласить эксперта
Ответы на вопрос 1
dimasmagadan
@dimasmagadan
подключить jetpack, врубить там оптимизацию картинок, и пускай оно все само в нужном формате автоматом конвертирует
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы