<picture>
<source type="image/webp" srcset="/assets/images/preview-tablet.webp, /assets/images/preview-tablet-retina.webp 2x" media="(max-width: 768px)">
<source type="image/webp" srcset="/assets/images/preview-desktop.webp, /assets/images/preview-desktop-retina.webp 2x" media="(min-width: 769px)">
<source type="image/webp" srcset="xxx.webp 1x, xxx.webp 2x">
<source srcset="/assets/images/preview-tablet.jpg, /assets/images/preview-tablet-retina.jpg 2x" media="(max-width: 768px)">
<source srcset="/assets/images/preview-desktop.jpg, /assets/images/preview-desktop-retina.jpg 2x" media="(min-width: 769px)">
<img alt="preview">
</picture>
То же самое, только про webp написать в начале и не забыть добавить атрибут type="image/webp". Браузеры, которые ничего не поймут, пойдут дальше и увидят jpg.