Хронический баг с srcset и размерами?
Похоже, что браузеры на основе хрома не выбирают правильное изображение в некоторых ситуациях. Не видел этого раньше.
img {
max-width: 100%;
height: auto;
}
<!-- This bug happens only in chromium based browsers
If device ratio 2x we will get 960w image instead 1424w (556*2 = 1112px) -->
<img src="https://place-hold.it/556x480&fontsize=20" width="556" height="480" srcset="https://place-hold.it/556x480&fontsize=20 556w, https://place-hold.it/960x720&fontsize=20 960w, https://place-hold.it/1424x1068&fontsize=20 1424w" sizes="(max-width: 556px) 100vw, 556px">
<!-- But if we set large image to 1112w (insted 1424w) we will get the right image. We will get the right image even if we set 1250w. -->
<img src="https://place-hold.it/556x480&fontsize=20" width="556" height="480" srcset="https://place-hold.it/556x480&fontsize=20 556w, https://place-hold.it/960x720&fontsize=20 960w, https://place-hold.it/1112x1068&fontsize=20 1112w" sizes="(max-width: 556px) 100vw, 556px">
<img src="https://place-hold.it/556x480&fontsize=20" width="556" height="480" srcset="https://place-hold.it/556x480&fontsize=20 556w, https://place-hold.it/960x720&fontsize=20 960w, https://place-hold.it/1250x1068&fontsize=20 1250w" sizes="(max-width: 556px) 100vw, 556px">
Что вы думаете, ребята?