Вопрос был о том, что лучше:

<img class="aligncenter wp-image-84168 lazy-loaded" src="https://jlady.ru/wp-content/uploads/2019/03/s04409524-3rv6u2b.jpg" data-lazy-type="image" data-src="https://jlady.ru/wp-content/uploads/2019/03/s04409524-3rv6u2b.jpg" alt="Мария Кожевникова: биография, семья, дети" width="604" height="368" srcset="https://jlady.ru/wp-content/uploads/2019/03/s04409524-3rv6u2b.jpg 660w, https://jlady.ru/wp-content/uploads/2019/03/s04409524-3rv6u2b-150x91.jpg 150w, https://jlady.ru/wp-content/uploads/2019/03/s04409524-3rv6u2b-300x183.jpg 300w, https://jlady.ru/wp-content/uploads/2019/03/s04409524-3rv6u2b-500x305.jpg 500w" data-srcset="" sizes="(max-width: 604px) 100vw, 604px">

Или:

<picture>
 <source srcset="small.jpg, small2x.jpg 2x"
         media="(max-width: 639px)">
 <source srcset="medium.jpg, medium2x.jpg 2x"
         media="(min-width: 640px) and (max-width: 1023px)">
 <source srcset="large.jpg, large2x.jpg 2x"
         media="(min-width: 1024px)">
 <img src="my-image.jpg" alt="My image"
      srcset="my-image2x.jpg 2x">
</picture>

picture

а почему?

можно к тому же сделать браузерную поддержку webp

А как оно связано с picture? это просто формат. Его уже поддерживают браузеры кроме дохлых. Можно пользовать.

А как оно связано с picture? это просто формат. Его уже поддерживают браузеры кроме дохлых. Можно пользовать.

picture позволяет переключать на другой формат если он неподдерживается

А что сделать? оформление четных и нечетных элементов списка?