Ретинизация и адаптивность изображений

Всем добрый день. Проблема следующая:

Есть адаптивный сайт. В нем блок с картинкой.

По ТЗ необходимо картинки ретинизировать и при этом на каждом вьюпорте (мобила, планшет, десктоп) картинка меняется. Так же в теге picture можно использовать только webp формат картинок. Соответственно, стандартный формат (jpg) должен меняться при ретине или изменении вьюпорта именно в img, не в picture.

Нашла способ с srcset и sizes. Но валидатор ругался, если я в srscet добавляла и ретиновую картинку 2x и картинку конкретного вьюпорта (например, 768w).

Как мне сделать и ретинизацию картинки и её изменение при трех видах вьюпорта?

<picture>
                <source type="image/webp" media="(max-width: 768px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
                <source type="image/webp" media="(max-width: 1023px)" srcset="img/[email protected] 1x, img/[email protected] 2x">
                <source type="image/webp" srcset="img/[email protected] 1x, img/[email protected] 2x">
                <img class="places__img" srcset="img/[email protected] 1x,
                                                img/[email protected] 2x,
                                                img/[email protected] 1024w" sizes="(max-width: 1023px) 288px" src="img/[email protected]" alt="Хорватия" width="350" height="430">
              </picture>