Как правильно прописать такое в img sizes?

Question

[wakenbyWork]

Верстка изображения:

<div class="grocery-picture">
  <img class="grocery-picture__laptop grocery-picture__laptop--desktop" src="/assets/images/[e-mail]">
  <img class="grocery-picture__laptop grocery-picture__laptop--tablet" src="/assets/images/[e-mail]">
  <img class="grocery-picture__laptop grocery-picture__laptop--mobile" src="/assets/images/[e-mail]">
</div>

.grocery-picture {
  position: relative;
  width: max-content;
  height: max-content;

  &__laptop {
    position: relative;
    z-index: 18;
    display: none;
    width: max-content;

    &--desktop {
      width: 547px;

      @media (width > $media-1199) {
        display: block;
      }
    }

    &--tablet {
      width: 472px;

      @media ($media-768 <= width <= $media-1199) {
        display: block;
      }
    }

    &--mobile {
      width: 335px;

      @media (width < $media-768) {
        display: block;
      }
    }
  }
}

В итоге идет смена 3 изображений на пк, планшете, телефоне. Но хочется записать это в виде одного img. Пробовал вот так:

<div class="grocery-picture">
  <img srcset="/assets/images/[e-mail] 335w, /assets/images/[e-mail] 472w, /assets/images/[e-mail] 547w" 
       sizes="(max-width: 767px) 335px, (max-width: 1199px) 472px, (min-width: 1200px) 547px"
  >
</div>

Смена ширины изображения происходит, но фотография не меняется. Видно что качество ухудшается так как ширина становиться верной по media но изображение остается из первого медиа условия, то есть такой 547px

Answer 1

[Алексей Дубровин]

Я думал что препроцессоры нужны что-бы делать код понятнее и логичнее.
тег picture

Comments

[wakenbyWork]

https://webref.ru/html/img/sizes - тут без тега picture

Answer 2

[Alexey Levicky]

Если нужно менять ширину изображения - img srcset, sizes
Если нужно заменять изображение на другое - picture
Почитайте спецификации, там описано что для чего нужно
спецификации от MDN