Адаптивные изображения. Что использовать: img или picture?

[mistergrim]

Как уничтожить веб, серия №-я.

[ivan386]

Я поэкспериментировал в Firefox и получил следующие результаты:

1. При отсутствии sizes браузер выбирает первое изображение которое шире окна.

2. При наличии sizes браузер выбирает изображение шире заданного размера.

<img
  src="bears-1920x1080.jpg"
  alt="bears"
  sizes="(max-width: 600px) 480px, (max-width: 1200px) 960px, 100vw"
  srcset="
    bears-480x270.jpg    480w,
    bears-960x540.jpg    960w,
    bears-1920x1080.jpg 1920w
  "
/>

Тобиж по крайней мере в Firefox картинка bears-480x270.jpg в этом примере не будет показана никогда.

[nightzen]

Протестировал в Firefox 91.0 (Mozilla Firefox for Ubuntu). Работает также, как описано в статье.

[ivan386]

Да косяк у меня. DPR был больше 1.

DPR = 1:

Всё правильно.

DPR = 2:

Выбирается изображение больше.

Тестовая страница

[Daniel217D]

Следовало указать, что это перевод статьи с английского - оригинал

[nightzen]

Это исходная статья, просто она находилась 5 дней на модерации.

[Makito]

Заметил такую странность - если изменять ширину окна, пройдя через все описанные в sizes брекпойнты, то браузер сначала выбирает изображения согласно описанным правилам, но в итоге найдет максимальную ширину изображения из sizes и будет применять только эту ширину изображения, игнорируя дальнейшие изменения ширины окна. То есть правила брекпойнтов из sizes перестают действовать.

Хотя в спецификации о таком поведении нигде не написано.

[ivan386]

В каком браузере такое поведение? В Firefox 91.0.2 у меня при сужении окна браузер выбирает картинку меньше.

[Makito]

Хром 92. А вы после сужения снова расширьте, пройдитесь несколько раз по всем брекпойнтам без перезагрузки страницы, и посмотрите какой размер картинки берется для рендера.

[ivan386]

Вот я выше делал тестовую страницу. Сколько я бы её не менял по ширине туда и обратно Firefox меняет изображения согласно заданному sizes.

[Makito]

Проверил - фокс ведет себя адекватно, а вот хром всегда выдает изображение 1920w. И еще странность - если просто изменять размер окна, то медиазапрос он отображает верно, а если включить режим эмуляции мобильного устройства и там изменять ширину области, то медиа ниже 1200 он тоже не отрабатывает.

В общем с хромом что то неладно.