Изменение размера изображения: правила и инструменты

Введение

Изменение размера изображения — одна из самых частых операций при подготовке картинок для веба. Фотография с камеры в 24 мегапикселя весит 8–15 МБ и имеет разрешение 6000×4000 — загружать её на сайт в таком виде бессмысленно. На странице она всё равно отобразится в размере 800×600, а лишние мегабайты будут грузиться впустую. По данным исследований, каждая дополнительная секунда загрузки страницы снижает конверсию на 7%, и тяжёлые изображения — главная причина медленных сайтов.

Однако изменить размер изображения — это не просто уменьшить ширину и высоту: нужно учитывать соотношение сторон, DPI, алгоритм интерполяции и формат сохранения. Ниже — теория, готовые размеры, инструменты и разбор типичных ошибок.

Термины и базовые понятия

Разрешение и физический размер

Разрешение изображения — это количество пикселей по ширине и высоте (например, 1920×1080). Физический размер — это размер изображения при печати в сантиметрах или дюймах. Эти две величины связаны через DPI (dots per inch) — количество точек на дюйм: изображение 3000×3000 пикселей при 300 DPI печатается размером 25×25 см.

Соотношение сторон

Соотношение сторон — это пропорция ширины к высоте (16:9, 4:3, 1:1). Важно сохранять её при ресайзе, иначе изображение растянется или сплюснется. Если целевое соотношение отличается от исходного, нужно либо обрезать лишнее (crop), либо добавить поля (padding).

Интерполяция

При изменении размера пиксели пересчитываются по алгоритму интерполяции. Существует несколько типов:

Nearest Neighbor — ближайший сосед. Самый быстрый, но низкого качества; для пиксель-арта.
Bilinear — билинейная. Усредняет соседние пиксели, баланс скорости и качества.
Bicubic — бикубическая. Учитывает 16 соседних пикселей, качественнее билинейной.
Lanczos — самая качественная для фотографий, чёткие края без артефактов.
Mitchell — компромисс между резкостью и плавностью, часто лучший выбор для увеличения.

Стандартные размеры для типовых задач

Большинство размеров уже стандартизированы платформами — подставляйте значения из таблицы в инструмент изменения размера без пересчётов.

Задача	Размер, px	Примечание
Аватарка соцсетей и мессенджеров	400×400	1:1; обрежется в круглую маску по центру
Обложка сообщества ВКонтакте	1590×400	≈4:1; на мобильных края подрезаются
Превью для YouTube	1280×720	16:9, до 2 МБ — минимум для HD-превью
Сторис и вертикальные обложки	1080×1920	9:16; по 200–250 px сверху и снизу — под интерфейс
Фон рабочего стола Full HD	1920×1080	16:9; для мониторов 2K/4K — 2560×1440 или 3840×2160
Превью ссылки в соцсетях (OG)	1200×630	Стандарт Open Graph для карточек ссылок
Фото в статье блога	1200–1600 по длинной стороне	Для retina — вдвое больше, затем сжать
Печать 10×15 см	≈1181×1772	Точный размер при 300 DPI: 3,937×5,906 дюйма × 300

Если платформа сменит рекомендации, пропорция останется — её подскажет ресайзер с блокировкой соотношения сторон.

Правила изменения размера

Правило 1. Подгоняйте под реальный размер отображения

Главное правило веб-оптимизации: изображение должно иметь то разрешение, в котором оно реально отображается на странице (с учётом retina-дисплеев). Не грузите файл 4000×3000, если картинка показывается в 800×600. Уменьшение с 4000 до 800 пикселей по длинной стороне уменьшает вес файла в 25 раз.

Правило 2. Учитывайте retina-дисплеи

Retina-экраны имеют плотность пикселей в 2 раза выше обычных. Чтобы картинка оставалась чёткой на retina, готовьте файл в 2 раза больше целевого отображаемого размера: если картинка показывается в 400×300, файл должен быть 800×600.

Правило 3. Сохраняйте пропорции

Всегда сохраняйте соотношение сторон. Растянутое или сплюснутое изображение выглядит непрофессионально. Если целевое соотношение отличается — обрежьте лишнее через crop.

Правило 4. Используйте правильную интерполяцию

Для уменьшения фотографий лучший выбор — Lanczos или Bicubic. Для увеличения — Mitchell или Bicubic smoother. Для пиксель-арта — Nearest Neighbor. Если сомневаетесь, используйте Bicubic — это универсальный компромисс.

Правило 5. Делайте resize перед сжатием

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

Изменить размер без потери качества

Уменьшение и увеличение несимметричны по потерям. При уменьшении (downscale) пикселей становится меньше, но каждый новый усредняется из нескольких старых: детализация снижается, а картинка остаётся естественной. При увеличении (upscale) интерполяция «выдумывает» пиксели, которых не было: растягивает существующие значения, и на фото появляются мыло, «лесенка» на диагоналях и ореолы у контрастных краёв. Тот же Lanczos, безупречный на уменьшении, при увеличении вдвое даёт мягкий результат.

Уменьшайте смело. Downscale — единственное безопасное направление: 6000×4000 превращается в 1600×1067 без видимой потери качества.
Увеличивайте только при необходимости и качественной интерполяцией (Mitchell, Lanczos) либо AI-инструментами — о них ниже.
Не обрабатывайте результат обработки. Каждая итерация ресайза и пересохранения JPG накапливает артефакты: три уменьшения по цепочке заметно хуже одного прямого.

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

Изменение размера для разных задач

Для веба (фотографии в статье)

Оптимальный размер: 1200–1600 пикселей по длинной стороне для обычной фотографии в статье. Для full-screen hero-изображений — 1920–2560 пикселей. Готовьте две версии: обычную и retina. Сохраняйте в JPG, WebP или AVIF с качеством 75–85.

Для интернет-магазина

Обычно нужны три размера: thumbnail (200×200), preview (500×500), large (1000×1000 или 1500×1500 для retina). Пропорции для всех товаров категории держите одинаковыми (например, 1:1), чтобы карточки выглядели аккуратно. Для одежды и мебели часто берут 4:5 или 3:4.

Для социальных сетей

Основные значения — в таблице стандартных размеров выше. Пост-картинка ВК — 510×240, превью Telegram — 800×450, вертикальный пост Instagram — 1080×1350.

Для печати

Для качественной печати нужно 300 DPI. Минимальное разрешение для A4 (21×29,7 см) считается так: 8,27×300=2481 и 11,69×300=3507, итого 2481×3507 пикселей. Для чернового качества (150 DPI) — вдвое меньше.

Инструменты для изменения размера

Браузерные инструменты

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

Графические редакторы

Для профессиональной работы лучше всего подходят Photoshop, Affinity Photo, GIMP. Они дают полный контроль над интерполяцией, цветовыми профилями и пакетной обработкой. GIMP — бесплатная альтернатива, по возможностям близкая к Photoshop.

Командная строка

Для сотен файлов — ImageMagick; команда меняет размер всех JPG в папке до ширины 800 пикселей:

mogrify -resize 800x *.jpg

ImageMagick быстрый, скриптуемый, работает на любой ОС. Минус — нужно освоить командную строку. Альтернатива «всё само» — фреймворки (Next.js, Gatsby, Astro): они генерируют варианты изображений из одного исходника и подают их через srcset.

Адаптивные изображения в HTML

Для разных экранов лучше подавать разные размеры изображений. Это делается через атрибут srcset:

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w, image-1600.jpg 1600w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Описание"
/>

Браузер сам выберет оптимальный размер по ширине экрана и плотности пикселей.

Пакетный ресайз: обработка 50 фото разом

Открывать пятьдесят файлов по одному — путь к ошибкам: усталость заставит пропускать проверку пропорций. Пакетная обработка автоматизирует рутину.

Проще всего начать с нашего онлайн-ресайзера: у него есть пакетный режим. Переключитесь на пакетную обработку и перетащите сразу всю папку — каждый файл встанет в очередь со своим статусом, от «в очереди» до «готово», а обработка пойдёт последовательно. Если какой-то файл не обработался, повторный запуск подхватит только неудачные. Результаты сохраняют исходные имена с суффиксом _resized и скачиваются одним ZIP-архивом — браузеры блокируют серии одиночных загрузок. Всё происходит локально в браузере: фото никуда не отправляются. Ширину и высоту с пересчётом пропорций задают в полях инструмента.

Когда файлов сотни или нужен строго одинаковый размер для каждого, удобнее офлайн-варианты:

IrfanView (Windows, бесплатный). File → Batch Conversion: добавьте файлы, включите «Use advanced options», задайте ресайз с сохранением пропорций и папку вывода — Start Batch.
XnConvert (Windows, macOS, Linux) — тот же принцип плюс фильтры и смена формата в одном проходе.
PowerShell — встроен в Windows. Скрипт уменьшает все JPG в папке до ширины 1600 пикселей и сохраняет рядом с суффиксом resized_:

Add-Type -AssemblyName System.Drawing
Get-ChildItem "C:\photos\*.jpg" | ForEach-Object {
  $img = [System.Drawing.Image]::FromFile($_.FullName)
  $w = 1600
  $h = [int]($img.Height * $w / $img.Width)
  $bmp = New-Object System.Drawing.Bitmap($w, $h)
  $gfx = [System.Drawing.Graphics]::FromImage($bmp)
  $gfx.InterpolationMode = 'HighQualityBicubic'
  $gfx.DrawImage($img, 0, 0, $w, $h)
  $bmp.Save($_.DirectoryName + '\resized_' + $_.Name,
    [System.Drawing.Imaging.ImageFormat]::Jpeg)
  $gfx.Dispose(); $bmp.Dispose(); $img.Dispose()
}

Правило то же, что и для одиночного файла: пакетный прогон делайте из оригиналов — одна операция вместо трёх сохранит и качество, и время.

В каком формате сохранять после ресайза

Размер пикселей — половина дела; вторая — контейнер, в котором файл уедет на сервер или в печать. Ошибка на этом шаге сводит ресайз на нет: уменьшенная картинка, сохранённая в PNG, может весить больше оригинала.

Что сохраняем	Формат	Почему
Фотографию	JPG, качество 80–85	Артефакты сжатия на фото незаметны, вес в разы меньше, чем у PNG
Графику с текстом и скриншоты	PNG	Буквы и линии остаются резкими, без «мыла» вокруг контуров
Картинку для сайта	WebP (или AVIF)	На 25–35% меньше JPG при том же качестве; поддерживают все современные браузеры
Изображение с прозрачностью	PNG	JPG прозрачность не сохраняет — вместо неё появится белый или чёрный фон
Файл для печати	TIFF или JPG в максимальном качестве	Минимум артефактов и запас для цветокоррекции в типографии

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

Типичные ошибки при изменении размера

Грузить оригинал без resize. Уменьшайте изображение до реального размера отображения.
Игнорировать retina. На retina-экранах обычная картинка выглядит «мыльной». Готовьте версии в 2 раза больше.
Использовать nearest neighbor для фото. На диагоналях появится «лесенка» — берите bicubic или Lanczos.
Не сохранять пропорции. Растянутое изображение выглядит непрофессионально.
Увеличивать маленькое изображение. Возникают артефакты — лучше найти оригинал в большем разрешении.
Менять DPI для веба. DPI не влияет на отображение в браузере — только на печать.
Сохранять metadata. EXIF-данные утяжеляют файл на 50–200 КБ. Удаляйте перед публикацией.

Симптомы ошибок узнаваемы — по ним легко поставить диагноз:

Ошибка	Решение
Фото стало мыльным после увеличения	Апскейл не добавляет деталей — интерполяция растянула имеющиеся пиксели. Найдите оригинал в большем разрешении либо используйте AI-увеличение
Пропорции исказились — лица вытянутые, предметы сплюснутые	Размер вводился без сохранения соотношения сторон. Включите блокировку пропорций или задайте только ширину: высота пересчитается сама
После уменьшения пикселей файл стал больше исходника	Результат пересохранён в PNG или увёз EXIF-данные. Сохраните в JPG или WebP и удалите метаданные — вес упадёт в разы
По краям картинки появились однотонные полосы	Перепутаны resize и crop: инструмент дополнил картинку полями вместо обрезки. Сначала обрежьте через инструмент обрезки, затем меняйте размер
Текст на картинке размылся после ресайза	Растровую надпись нельзя масштабировать без потерь. Экспортируйте исходник заново сразу в целевом размере (для retina — в два раза больше) или пересоздайте текст поверх уменьшенной картинки

Увеличение изображений: AI и традиционные методы

Увеличение (upsampling) — сложная задача, потому что нужно «придумать» недостающие пиксели. Традиционные методы (Bicubic, Lanczos) дают размытый результат. AI-алгоритмы (Topaz Gigapixel, Real-ESRGAN, Waifu2x) работают лучше: они обучены на больших наборах изображений и восстанавливают детали, которых не было в оригинале.

Для старых фото, сканов и скриншотов AI-upscaling может дать впечатляющие результаты. Но помните: AI «выдумывает» детали, и они могут не соответствовать реальности. Для документальной фотографии такой подход неприемлем.

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

Чем resize отличается от crop?

Resize меняет масштаб всего изображения: все элементы остаются в кадре. Crop вырезает часть кадра и выбрасывает остальное, не меняя разрешение области. Их комбинируют: сначала crop под нужную пропорцию (из 4:3 в 16:9), затем resize. Подробнее — в материале про обрезку изображений.

Что такое интерполяция простыми словами?

Это способ вычислить цвет новых пикселей из цветов старых. При уменьшении алгоритм усредняет группы соседних пикселей в один, при увеличении достраивает промежуточные значения. Разница — в количестве соседей и весах: Nearest Neighbor берёт один ближайший, Bicubic — шестнадцать, Lanczos — ещё больше, со сложными весами.

Как уменьшить вес файла, не меняя размеры?

Работать со сжатием, а не с пикселями: пересохранить JPG с качеством 75–85, убрать EXIF-данные, конвертировать в WebP. Это умеет инструмент сжатия изображений: разрешение прежнее, а вес падает в 2–5 раз.

Какой размер выбрать для аватарки ВКонтакте и Telegram?

Универсальный квадрат 400×400 закрывает оба случая: ВКонтакте рекомендует аватар от 400×400, иконку канала Telegram удобно готовить в 500×500. Загружайте именно квадрат: прямоугольное фото сервис обрежет вслепую. Лучше сначала обрезать вручную, затем уменьшить.

Почему фото из WhatsApp весит меньше и выглядит хуже?

Мессенджер по умолчанию экономит трафик: при отправке фото уменьшается до примерно 1600 пикселей по длинной стороне и пересжимается. Кадр на 24 мегапикселя превращается в файл на 100–300 КБ — поэтому «пересланные» картинки и весят меньше. Деталей в таком файле уже нет: после апскейла он останется мыльным. Для серьёзной работы запрашивайте оригинал — «отправить как файл» или режим HD.

Нужно ли менять DPI перед загрузкой на сайт?

Нет. Для браузера существует только разрешение в пикселях: файл 2000×1500 с 72 DPI и с 300 DPI отобразятся и будут весить одинаково. DPI — служебная метка для печати, важная только по запросу типографии.

Заключение

Изменение размера изображения — простая на первый взгляд операция, которая на практике имеет много нюансов. Правильный выбор разрешения, интерполяции и формата напрямую влияет на скорость сайта, качество отображения и позиции в Яндексе. Главное правило — подгоняйте изображение под реальный размер отображения, учитывайте retina-дисплеи и не забывайте про соотношение сторон.

Для разовой задачи используйте инструмент изменения размера изображений — он работает в браузере и умеет пакетную обработку. Для массовых прогонов подойдут ImageMagick или IrfanView. Если картинка показывается в 400×300, не грузите 4000×3000: обрежьте лишнее и подгоните размер — сайт станет быстрее, а посетители скажут спасибо.