Калькулятор брейкпоинтов адаптивного изображения

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

Зачем создавать несколько размеров изображения

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

Как пользоваться калькулятором

1. Укажите ширину и высоту исходного изображения.
2. Выберите максимальную плотность экрана: 1×, 1,5×, 2× или 3×.
3. Задайте брейкпоинты для мобильных устройств, планшетов и компьютеров.
4. Введите реальную ширину изображения в макете для каждой группы.
5. Выберите шаг округления, имя и формат файла.
6. Нажмите «Подобрать размеры» и экспортируйте рекомендованные версии.

Что такое брейкпоинт изображения

Брейкпоинт — это граница ширины viewport, после которой меняется предполагаемый размер изображения в макете. Например, на телефоне картинка может занимать 360 px, на планшете — 768 px, а в настольном контейнере ограничиваться 1200 px.

Сам брейкпоинт не обязательно равен ширине файла. Размер файла зависит от ширины отображения и плотности пикселей устройства.

Как учитывается DPR

DPR показывает, сколько физических пикселей экрана приходится на один CSS-пиксель. Для картинки шириной 360 CSS-пикселей обычному экрану достаточно файла 360 px, а экрану с DPR 2 желательно предоставить версию примерно 720 px.

ширина файла = ширина отображения × DPR

Калькулятор создаёт обычную и увеличенную версии для каждой группы устройств. Совпадающие результаты объединяются.

Экономичный, сбалансированный и Retina-режимы

• Экономичный — ограничение DPR 1,5. Подходит, когда важны скорость и небольшой трафик.
• Сбалансированный — DPR 2. Универсальный вариант для большинства сайтов.
• Retina — DPR 3. Даёт больше деталей, но требует более тяжёлых файлов и крупного исходника.

Зачем округлять размеры

Точные вычисления часто дают неудобные значения вроде 734 или 1537 px. Округление вверх до 50 или 100 px упрощает экспорт и повторное использование файлов. Небольшой запас помогает браузеру выбрать подходящий вариант без заметной потери резкости.

Ограничение размером исходника

Калькулятор никогда не рекомендует версию шире загруженного исходника. Искусственное увеличение не создаёт новых деталей и обычно только увеличивает размер файла. Если Retina-вариант упирается в исходную ширину, несколько рекомендаций могут объединиться в один файл.

Пример расчёта

Исходное изображение имеет размер 2400 × 1600 px. В макете оно отображается с шириной 360 px на телефоне, 768 px на планшете и 1200 px на компьютере. При DPR 2 потребуются версии примерно:

• 400 и 800 px для мобильных устройств;
• 800 и 1600 px для планшетов;
• 1200 и 2400 px для компьютеров.

После удаления повторов получается пять файлов: 400, 800, 1200, 1600 и 2400 px.

Как использовать готовый srcset

<img
  src="image-1200.webp"
  srcset="image-400.webp 400w,
          image-800.webp 800w,
          image-1200.webp 1200w,
          image-1600.webp 1600w,
          image-2400.webp 2400w"
  sizes="(max-width: 480px) 360px,
         (max-width: 1024px) 768px,
         1200px"
  alt="Описание изображения">

Браузер сопоставит sizes с шириной viewport, учтёт DPR и выберет один из файлов, перечисленных в srcset.

Чем srcset отличается от CSS-медиазапросов

CSS управляет тем, как изображение отображается в макете. Атрибут srcset помогает выбрать файл подходящего разрешения. Эти механизмы дополняют друг друга: CSS задаёт ширину элемента, а HTML сообщает браузеру доступные источники.

Как подобрать ширину изображения в макете

Указывайте не ширину всего устройства, а фактическую ширину картинки. Если на компьютере карточка занимает треть контейнера 1200 px, её ширина будет около 380–400 px с учётом промежутков. Для полноширинного баннера значение может быть близко к ширине контейнера или viewport.

Какой формат выбрать

• AVIF часто даёт минимальный размер, но требует проверки качества и совместимости рабочего процесса.
• WebP обеспечивает хороший баланс качества, размера и поддержки.
• JPEG подходит для фотографий и остаётся универсальным запасным вариантом.
• PNG нужен для прозрачности или графики, где потери недопустимы, но может быть тяжелее.

Частые ошибки

• создание слишком большого количества почти одинаковых файлов;
• использование ширины viewport вместо реальной ширины изображения;
• отсутствие версии для экранов с высокой плотностью;
• увеличение файлов выше разрешения исходника;
• несоответствие дескриптора w фактической ширине файла;
• разные пропорции файлов в одном наборе без использования элемента picture.

Ответы на частые вопросы

Нужен ли отдельный файл для каждого устройства?

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

Почему для телефона может понадобиться файл 720 px?

Если изображение отображается шириной 360 CSS-пикселей на экране DPR 2, для чёткого результата требуется около 720 физических пикселей.

Обязательно ли использовать все рекомендации?

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

Создаёт ли калькулятор сами изображения?

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