Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

seoАвтор: Пуск‑Медиа (импорт)Просмотры: 3

srcset и sizes: responsive images без лишних мегапикселей

Как браузер выбирает width descriptor, пример sizes для сетки каталога и связь с DPR.

Изображение статьи: srcset и sizes: responsive images без лишних мегапикселей

Атрибут srcset с w descriptors и sizes сообщает браузеру, какой файл загрузить для текущего layout slot — экономия трафика на mobile.

Без корректного sizes браузер может взять слишком большое изображение «на всякий случай».

- [Responsive images — web.dev](https://web.dev/articles/responsive-images) — srcset, sizes, art direction.

- [Responsive images — MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) — Обучающий материал с примерами.

---

## CMS

Генерируйте 3–5 width variants на upload; в шаблоне фиксируйте sizes под реальную CSS grid.

Hero и карточки каталога — разные sizes, не копируйте один атрибут везде.

#изображения#производительность#HTML

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.