Как правильно комбинировать ретину, webp и max-width / min-width в теге picture?

Question

[Pavel_20]

Приветствую!
Собственно суть вопроса передается описанием.
Толкового объяснения, чтобы не было сомнений, как группировать правильно все 3 фичи в теге picture я не нашел.
Правильно ли я делаю?

<picture>
        <source media="(min-width: 768px)" srcset="assets/images/promo.png 1x, assets/images/promo_2x.png 2x">
        <source media="(min-width: 320px)" srcset="assets/images/promo_sm.png 1x, assets/images/promo_sm_2x.png 2x">
        <source type="image/webp" srcset="assets/images/promo.webp, assets/images/promo.png">
        <source type="image/webp" srcset="assets/images/promo_2x.webp, assets/images/promo_2x.png">
        <source type="image/webp" srcset="assets/images/promo_sm.webp, assets/images/promo_sm.png">
        <source type="image/webp" srcset="assets/images/promo_sm_2x.webp, assets/images/promo_sm_2x.png">
        <img class="promo__img" src="assets/images/promo_sm.png" alt="">
      </picture>

Comments

[Ankhena]

Правильно ли я делаю?

Нет.
Вы смешали в один source webp и png и забыли media для webp.

<picture>
  <source type="image/webp" media="(min-width: 940px)" srcset="img/[e-mail], img/[e-mail] 2x">
  <source type="image/webp" media="(min-width: 620px)" srcset="img/[e-mail], img/[e-mail] 2x">
  <source type="image/webp" srcset="img/[e-mail], img/[e-mail] 2x">
  <source media="(min-width: 940px)" srcset="img/[e-mail], img/[e-mail] 2x">
  <source media="(min-width: 620px)" srcset="img/[e-mail], img/[e-mail] 2x">
  <img class="photo-card__img photo-card__img--main" src="img/[e-mail]" srcset="img/[e-mail] 2x" alt="фото">
</picture>