srcset и sizes: responsive images без лишних мегапикселей
Как браузер выбирает width descriptor, пример sizes для сетки каталога и связь с DPR.
Атрибут `srcset` с `w` descriptors и `sizes` сообщает браузеру, какой файл загрузить для текущего layout slot — экономия трафика на mobile.
Без корректного `sizes` браузер может взять слишком большое изображение «на всякий случай».
- Responsive images — web.dev — srcset, sizes, art direction.
- Responsive images — MDN — Обучающий материал с примерами.
CMS
Генерируйте 3–5 width variants на upload; в шаблоне фиксируйте sizes под реальную CSS grid.
Hero и карточки каталога — разные sizes, не копируйте один атрибут везде.