Как реализовать автоматическое добавление формата webp для background-image?

Question

[mUchenik]

Всем добра и здоровья, уважаемые знатоки!
Друзья, прошу совета:
Как реализовать автоматическое добавление формата webp для background-image?
Суть вот в чем:
Добавляю background-image через стили в html:

<div id="gtco-header" class="gtco-cover" role="banner" style="background-image: url(<?php the_field('Main_Image_background'); ?>) ;" ></div>

Поясню сразу, картинку добавляю через кастомное поле реализованное с помощью ACF.
В данный момент, изображение добавляется только в формате jpeg и google на это ругается.
Что нужно сделать, что бы автоматически генерировался и отдавался еще и формат webp для background?
Пробовал выводить выводить через тег img... (не через css), столкнулся с тем, что стили слетают совсем.
Может есть какой то способ, проще чем отдельно прописывать стили?
Спасибо.

Comments

[ThunderCat]

а у вас оно есть, это изображение в вебп?

[mUchenik]

ThunderCat, нет, физически его нет.
Я и задумываюсь над вопросом о его генерации в автоматическом режиме.
Механизм такой:
Я заливаю jpeg на cms WP -> установленный плагин генерирует webp.
Но как оказалось, при добавлении изображения через стили, плагин бессилен и на эти изображения не генерирует webp.
Быть может как то через js возможно сделать генерацию и вывод webp через стили? Или иные способы есть?