# Адаптивные изображения: как не отправлять телефону лишние мегабайты

Источник: https://quicklanding.ru/knowledge/image-responsive-sizes/

Как подбирать размеры фотографий для карточек и статей, использовать srcset и sizes и проверять загрузку на телефоне.

Фотография может занимать небольшую карточку на телефоне, но браузер всё равно скачает многомегабайтный оригинал, если ему дали только этот файл. Уменьшение картинки через CSS меняет её видимый размер, а не объём загрузки. Для разных экранов стоит подготовить подходящие версии и объяснить браузеру, как они используются.

## Начните с места изображения в макете

![Смартфон с приложениями как пример мобильного устройства](/assets/images/knowledge/image-responsive-sizes.webp)

Карточка каталога, фотография внутри статьи и большой первый экран имеют разные размеры. Определите ширину контейнера на типичных экранах и необходимость высокого качества при увеличении. Не создавайте один набор гигантских файлов для всех блоков.

Учтите плотность пикселей устройства. Телефон с небольшим экраном может выбирать версию с большим числом пикселей для чёткости. Поэтому нельзя оценивать потребность только по ширине окна. Но и отправлять всем посетителям максимальный оригинал без выбора не нужно.

## Разделите выбор разрешения и кадрирование

Для одной композиции можно подготовить несколько разрешений. Браузер выбирает подходящий файл с учётом размеров и своих условий. Если на телефоне нужен другой кадр, например крупный объект вместо широкой сцены, это уже отдельная задача композиции.

| Задача | Подход |
| --- | --- |
| Та же фотография разной чёткости | Несколько размеров в srcset |
| Разная ширина блока | Корректное описание размеров в sizes |
| Другой кадр для телефона | Отдельные варианты через picture |
| Обычный запасной файл | Осмысленный src для базового отображения |

Не вырезайте важную часть только ради красивого соотношения сторон. Проверьте лицо, товар, подписи и смысл снимка. Если кадр служит доказательством выполненной работы, он должен сохранять нужные подробности.

## Проверьте соответствие sizes реальному блоку

Атрибут sizes помогает браузеру оценить ширину изображения в макете, когда используется набор с обозначением ширины файлов. Если карточка занимает треть большого контейнера, описание «вся ширина окна» может привести к выбору слишком тяжёлой версии.

Условия нужно сверять с настоящими точками изменения макета. Обновление сетки с трёх колонок на две требует проверки этой логики. Имена файлов с числами не заменяют корректное указание их фактических размеров.

## Сжимайте с визуальной проверкой

WebP и другие современные форматы могут уменьшить объём, но результат зависит от изображения и настроек. Сравните мелкие детали, границы и текст. Для схем и интерфейсных иллюстраций подходящий векторный формат иногда полезнее фотографии, сохранённой с сильным сжатием.

Сохраните оригиналы отдельно для будущей подготовки версий. В публичный архив должны попасть реально используемые файлы. Ссылка на внешнюю фотографию не заменяет локальное изображение, если сайт должен работать после установки без зависимости от стороннего сервиса.

## Учитывайте место в загрузке страницы

Изображению полезно задать размеры или соотношение сторон, чтобы под него сразу оставалось место. Это уменьшает неожиданное смещение текста. Отложенная загрузка подходит для картинок ниже первого экрана, но важное изображение сверху не должно ждать появления в области просмотра.

Не назначайте высокий приоритет всем картинкам каталога. Они начнут конкурировать за ресурсы. Выберите действительно важное изображение и проверьте результат измерением, а не количеством добавленных атрибутов.

## Посмотрите, какой файл скачался

Проверяйте выбор в инструментах браузера: фактический адрес изображения, переданный объём, размеры и время загрузки. Повторите на узком экране и при ограниченной сети. Кэш может скрывать проблему, поэтому для проверки нужна контролируемая загрузка.

Осмотрите мобильную карточку и статью целиком. Файл должен открываться, композиция сохраняться, а страница не уходить в горизонтальную прокрутку. Alt-текст описывает значимое изображение; подпись под ним не обязана повторять название страницы.

В QuickLanding подготовку изображений включаем в работу с шаблонами карточек и статей. Проверяем локальные файлы, размеры блока и действительный выбор браузера. Это позволяет развивать каталог без постепенного накопления тяжёлых фотографий, замедляющих каждую новую страницу.

## Документация и проверка сведений

Технические сведения сверены с документацией на 7 октября 2026 года. При настройке конкретного сервиса проверьте его текущую версию и действующие инструкции.

- [MDN: адаптивные изображения](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
- [Google: изображения и поиск](https://developers.google.com/search/docs/appearance/google-images/)

## Материалы по соседним задачам

- [Изображения для сайта: размеры, WebP, alt и скорость](/knowledge/website-images-webp-alt/)
- [Core Web Vitals: как понять, что тормозит сайт](/knowledge/core-web-vitals-business/)
- [Разработка сайтов](/services/websites/)

## Частые вопросы

### Достаточно ли поставить width: 100%?

Это помогает изображению вписаться в контейнер, но не уменьшает скачиваемый файл. Для управления загрузкой нужны подходящие версии и корректная разметка выбора. Проверяйте фактический адрес и объём в браузере.

### Нужно делать отдельный кадр для каждой мобилки?

Нет. Обычно достаточно разумного набора размеров и нескольких вариантов композиции там, где они нужны. Количество файлов выбирают по макету и изображениям, а не по полному списку моделей телефонов.

### Всем изображениям нужна отложенная загрузка?

Нет. Важная картинка первого экрана должна загружаться своевременно. Lazy loading полезен для изображений ниже, когда он не мешает восприятию и проверен в реальном браузере.

Автор: Владимир Николаев