Изменение размера изображений: пиксели, соотношение сторон, DPI и оптимизация

Изменение размера изображения кажется простым — передвинул ползунок, ввёл число. Но ошибка здесь приводит к размытым увеличениям, искажённым пропорциям, раздутым файлам, которые ухудшают Core Web Vitals, или печати неправильного размера. Это руководство охватывает всё важное при изменении размера изображений для веба, приложений и печати. Используйте Инструмент изменения размера вместе с чтением.

Пиксели или проценты

Большинство инструментов предлагают два режима ввода:

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

Соотношение сторон: блокировать или потерять пропорции

Соотношение сторон — это отношение ширины к высоте изображения. Изображение 1920×1080 имеет соотношение 16:9. Изображение 400×400 — квадратное (1:1).

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

Исходное: 1200 × 800 px  (соотношение 3:2)

Изменить ширину до 600 px (с блокировкой):
  высота = 600 × (800 / 1200) = 400 px
  Результат: 600 × 400 px ✓

Изменить до 600 × 600 px (без блокировки):
  Результат: 600 × 600 px — изображение растянуто ✗

Распространённые соотношения сторон

DPI и PPI: разрешение для печати и экрана

PPI (пикселей на дюйм) описывает, сколько пикселей помещается в одном дюйме цифрового дисплея. DPI (точек на дюйм) описывает физические точки чернил на дюйм при печати. Термины часто используются как синонимы, но означают разное.

Для экранов

Разрешение экрана определяется дисплеем, а не файлом изображения. Изображение 1920×1080, отображённое на 24-дюймовом мониторе, показывается при ~92 PPI. То же изображение на 13-дюймовом Retina-дисплее — ~227 PPI. Метаданные DPI в файле не влияют на отображение в браузере.

Для веба важны размеры в пикселях, а не метаданные DPI. Изображение 200×200 с пометкой 300 DPI имеет тот же размер файла, что и то же изображение с пометкой 72 DPI.

Для печати

При печати принтеру нужно достаточно пикселей для чёткого воспроизведения в физическом размере. Стандарт для высококачественной печати — 300 DPI:

Нужные пиксели = физический размер (дюймы) × DPI

Фото 4 × 6 дюймов при 300 DPI:
  ширина  = 4 × 300 = 1200 px
  высота  = 6 × 300 = 1800 px
  → Нужен исходник минимум 1200 × 1800 px

Лист A4 (210 × 297 мм = 8,27 × 11,69 дюйма) при 300 DPI:
  ширина  ≈ 2481 px
  высота  ≈ 3508 px

Почему увеличение ухудшает качество

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

Правило: не увеличивайте более чем в 2× без ИИ-апскейлера. Для веба всегда начинайте с максимального разрешения и уменьшайте — даунскейлинг всегда даёт лучший результат.

Целевые размеры для типичных сценариев веба

Retina и дисплеи с высокой плотностью пикселей

Дисплеи с высокой плотностью (Retina, 2×, 3×) используют несколько физических пикселей на каждый CSS-пиксель. Изображение, отображаемое при 400×400 CSS-пикселях, должно быть 800×800 физических пикселей на экране 2×, чтобы выглядеть чётко.

В HTML используйте srcset для подачи нужного разрешения:

<img
  src="avatar-400.jpg"
  srcset="avatar-400.jpg 1x, avatar-800.jpg 2x"
  width="400"
  height="400"
  alt="Профиль"
/>

В Next.js компонент next/image делает это автоматически:

import Image from 'next/image';

<Image
  src="/avatar.jpg"
  width={400}
  height={400}
  alt="Профиль"
  // Next.js автоматически генерирует варианты 1x, 2x и WebP
/>

Ресайз против сжатия: что больше уменьшает размер файла

Оба метода уменьшают размер файла, но работают по-разному:

• Ресайз уменьшает размеры (меньше пикселей = меньше данных). Уменьшение обоих размеров вдвое сокращает количество пикселей на 75%, обычно уменьшая файл на 60–80%.
• Сжатие сохраняет размеры, но уменьшает детализацию через потерю качества (JPEG) или без потерь (PNG-оптимизация).

Для больших веб-изображений всегда эффективнее сначала уменьшить до нужных размеров, затем сжать. Фото 4000×3000 даже при агрессивном сжатии будет тяжелее, чем то же фото уменьшенное до 1200×900 и умеренно сжатое.

После ресайза запустите результат через Компрессор изображений для оптимального соотношения размера и качества.

Программное изменение размера

Для серверного или сборочного ресайза sharp — стандартная Node.js-библиотека на базе libvips, значительно быстрее альтернатив:

npm install sharp

import sharp from 'sharp';

// Ширина с блокировкой соотношения сторон
await sharp('input.jpg')
  .resize(800)                   // только ширина → высота вычисляется автоматически
  .toFile('output-800.jpg');

// Точные размеры (может исказить)
await sharp('input.jpg')
  .resize(800, 600)
  .toFile('output-800x600.jpg');

// Вписать в прямоугольник (без искажений)
await sharp('input.jpg')
  .resize(800, 600, { fit: 'inside' })
  .toFile('output-fit.jpg');

// Заполнить прямоугольник с обрезкой
await sharp('input.jpg')
  .resize(800, 600, { fit: 'cover', position: 'centre' })
  .toFile('output-cover.jpg');

// Генерация адаптивных размеров
const sizes = [400, 800, 1200, 1920];
for (const width of sizes) {
  await sharp('hero.jpg')
    .resize(width)
    .webp({ quality: 80 })
    .toFile(`hero-${width}.webp`);
}

Режимы fit

Чеклист перед изменением размера

• Нужны точные размеры или максимальный размер? Пиксели — для точных целей; режим inside — для ограничений по максимуму.
• Важно ли соотношение сторон? Блокируйте, если явно не нужна обрезка.
• Это для экрана или печати? Для печати вычислите пиксели из физического размера × DPI (300 для качества).
• Вы увеличиваете? При увеличении сверх исходного ожидайте потерю качества. Рассмотрите ИИ-апскейлинг для значительного увеличения.
• Будет ли отображаться на Retina? Подготовьте версии 2× или используйте next/image / srcset.
• После ресайза — сжимайте. Сначала измените размер, затем используйте Компрессор изображений.

Изменяйте размер изображений прямо в браузере — без загрузки на сервер — с помощью Инструмента изменения размера. Для конвертации форматов и сжатия используйте Компрессор изображений.