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

Question

[thanos_universe]

В 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');}

но у меня немного сложнее все из-за премиум шаблона.

Answer 1

[Дмитрий]

подключить jetpack, врубить там оптимизацию картинок, и пускай оно все само в нужном формате автоматом конвертирует