Как изменить размер изображения онлайн: полный гайд

Ресайз, кроп, сжатие: что выбрать

Ресайз — это изменение количества пикселей в изображении: было 4032 по ширине, стало 1200. Кроп — обрезка кадра до нужной области или пропорций, пиксели внутри рамки не масштабируются. Сжатие меняет не размеры, а способ кодирования пикселей; конвертация — формат файла (JPG, WebP, AVIF).

• Картинка больше, чем нужно экрану, — ресайз
• Нужен квадрат под аватар или превью 16:9 — кроп
• Размеры устраивают, но файл тяжёлый — сжатие
• Нужен современный формат для веба — конвертация

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

Сколько пикселей на самом деле нужно экрану

Камера телефона отдаёт 4032×3024 — 12,2 млн пикселей. Full HD-монитор целиком показывает 1920×1080, то есть 2,1 млн. Картинке в колонке статьи даже на Retina-экране хватает 1200–1600 px по ширине. Остальные пиксели браузер выбрасывает при отрисовке — но пользователь успевает их скачать.

Правило: пиксели = ширина на экране × плотность

Блок шириной 600 CSS-пикселей на экране с плотностью 2× требует картинку 1200 px. Больше — лишний трафик, меньше — замыленные края. Разным экранам разные версии одного изображения отдают атрибуты srcset и sizes:

<img src="photo-800.jpg"
     srcset="photo-800.jpg 800w, photo-1200.jpg 1200w, photo-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 600px"
     width="1200" height="900" alt="Фото товара" title="Фото товара">

Типичный смартфон отдаёт странице 390–430 CSS-пикселей ширины: полноэкранная картинка на плотности 3× — это максимум около 1290 px. Даже для мобильного полноэкранного показа 1600 px хватает с запасом.

А что с DPI?

DPI важен только для печати: 300 DPI — типографский стандарт. Экран смотрит на пиксели: два файла 1200×900 с DPI 72 и DPI 300 выглядят в браузере одинаково и весят одинаково. Менять DPI ради «качества для веба» бессмысленно.

Что ресайз даёт весу и скорости

Мы прогнали одно реальное фото с iPhone — 4032×3024, JPG, 729 КБ — через ресайз со стандартными настройками (sips, macOS). Вот что вышло:

Тяжёлая картинка в первом экране — типичный LCP-элемент страницы. Google считает LCP хорошим до 2,5 секунды, а на медленном мобильном соединении лишние полмегабайта изображения превращаются в заметные секунды ожидания. Ресайз — самый дешёвый способ убрать этот вес: без смены формата, без потери резкости, одним действием.

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

Сравнение способов: онлайн, Photoshop, CLI, CSS

Для пакетных сценариев в терминале ImageMagick закрывает задачу одной командой:

magick input.jpg -resize 1200x -quality 82 output.jpg
# вся папка сразу:
magick mogrify -resize 1200x -quality 82 -path ./out *.jpg

Размеры под соцсети и Open Graph

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

Под большинство этих случаев в ресайзере есть пресеты кропа 1:1 и 16:9: выберите пресет, сдвиньте рамку на нужную область — и размер, и пропорции сойдутся с первого раза. Учтите: платформы дополнительно пережимают всё загруженное своими кодеками, поэтому файл ровно нужного размера сохраняет качество лучше, чем четырёхтысячный оригинал после их автоматического ужатия.

Частые ошибки при изменении размера

• Увеличение маленькой картинки: недостающие пиксели досчитываются интерполяцией, результат мылится — ищите оригинал крупнее
• Перезапись оригинала уменьшенной копией: вернуть удалённые пиксели нельзя, храните исходник отдельно
• Ресайз скриншотов с мелким текстом: текст становится нечитаемым раньше, чем фото теряет вид — кропайте нужную область вместо уменьшения
• Растяжение без сохранения пропорций: искажённые лица и логотипы заметны мгновенно — держите замок пропорций включённым
• Один размер «для всего»: экраны разные, отдавайте 2–3 версии через srcset
• Ресайз до кропа: сначала приводите пропорции, потом размер — иначе рамку придётся пересчитывать заново

Все шесть ошибок закрываются одним правилом: оригинал — в архив, в веб — копия под конкретное место показа.

Как изменить размер в нашем инструменте

Ресайзер работает в браузере, бесплатно и без регистрации. Понадобятся четыре шага:

• Перетащите изображение в окно инструмента
• Задайте ширину в пикселях — высота посчитается по пропорциям, либо переключитесь в режим кропа и выберите пресет 1:1, 16:9 или 4:3
• Проверьте превью и итоговый вес
• Скачайте результат — в исходном формате, PNG, JPG или WebP

Вопросы и ответы

Теряется ли качество при уменьшении размера?

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

Какой размер выбрать для сайта?

Ширина блока на странице, умноженная на плотность экрана. Для полноширинного hero — 1600–2560 px, для картинки в тексте — 1200 px, для превью — 400–800 px. Если сомневаетесь, 1600 px закрывает большинство сценариев. Точную ширину блока покажет инспектор браузера: правый клик по картинке — «Исследовать элемент».

Чем ресайз отличается от сжатия?

Ресайз убирает пиксели, сжатие плотнее кодирует оставшиеся. Наш замер выше дал −68% одним только ресайзом; сжатие и смена формата добавляют экономию сверху — прогоните свой файл через оба инструмента и сравните.

Нужно ли что-то устанавливать?

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

Как изменить размер сразу многих файлов?

Онлайн-инструмент обрабатывает файлы по одному. Для десятков и сотен файлов быстрее команда mogrify из ImageMagick — пример в разделе сравнения выше, она проходит папку целиком за один запуск.

Какой размер нужен для превью ссылки (Open Graph)?

1200×630 px — стандарт og:image, который мессенджеры и соцсети используют при разворачивании ссылки. Пропорция 1,91:1; при меньших размерах платформа может показать мелкое превью вместо крупного.

Влияет ли размер изображений на SEO?

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

Выводы и источники

• Экрану нужно меньше пикселей, чем отдаёт камера: 1200–1600 px закрывают большинство сценариев
• Ресайз тестового фото до 1200 px срезал 68% веса без видимой разницы
• Кроп — про композицию, сжатие — про кодирование; сочетайте все три операции
• CSS width — не ресайз: файл скачивается целиком

Пороги скорости и работа браузера с изображениями — в первоисточниках: