Комментарии 11
Я поэкспериментировал в Firefox и получил следующие результаты:
При отсутствии sizes браузер выбирает первое изображение которое шире окна.
При наличии 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 в этом примере не будет показана никогда.
Следовало указать, что это перевод статьи с английского - оригинал
Заметил такую странность - если изменять ширину окна, пройдя через все описанные в sizes брекпойнты, то браузер сначала выбирает изображения согласно описанным правилам, но в итоге найдет максимальную ширину изображения из sizes и будет применять только эту ширину изображения, игнорируя дальнейшие изменения ширины окна. То есть правила брекпойнтов из sizes перестают действовать.
Хотя в спецификации о таком поведении нигде не написано.
В каком браузере такое поведение? В Firefox 91.0.2 у меня при сужении окна браузер выбирает картинку меньше.
Хром 92. А вы после сужения снова расширьте, пройдитесь несколько раз по всем брекпойнтам без перезагрузки страницы, и посмотрите какой размер картинки берется для рендера.
Вот я выше делал тестовую страницу. Сколько я бы её не менял по ширине туда и обратно Firefox меняет изображения согласно заданному sizes.
Проверил - фокс ведет себя адекватно, а вот хром всегда выдает изображение 1920w. И еще странность - если просто изменять размер окна, то медиазапрос он отображает верно, а если включить режим эмуляции мобильного устройства и там изменять ширину области, то медиа ниже 1200 он тоже не отрабатывает.
В общем с хромом что то неладно.
Адаптивные изображения. Что использовать: img или picture?