Подгоните изображение под место на странице
Фотография с камеры редко совпадает по размеру с блоком на сайте. Для небольшой карточки не нужен исходник шириной 5000 px, а для крупного баннера картинка 300 px будет слишком маленькой. Здесь можно уменьшить размеры изображения до заданных ограничений и сразу сохранить подходящий формат.
Инструмент сохраняет весь кадр. Он не обрезает фотографию, не растягивает её и не дорисовывает детали. Если для одинаковых карточек нужна строгая пропорция, например 1:1, потребуется отдельное кадрирование либо аккуратный вывод через object-fit в вёрстке.
Как изменить ширину и высоту
- Выберите JPEG, PNG или WebP. Можно обработать до 20 файлов за один запуск в пределах 60 МБ, не более 10 МБ на исходник.
- Оставьте включённым ограничение размеров. Укажите максимальную ширину, высоту или оба значения. Пустое поле не ограничивает соответствующую сторону.
- Выберите формат результата. Для JPEG и WebP задайте качество, а для JPEG при необходимости выберите фон прозрачных участков.
- Запустите обработку. Посмотрите реальные размеры каждого результата и скачайте нужные файлы отдельно или архивом.
Как работает сохранение пропорций
Допустим, исходник имеет размеры 3000 × 2000 px. Если ограничить ширину до 1200 px, высота станет 800 px. Если одновременно задать высоту 600 px, инструмент выберет более строгое ограничение: результат будет 900 × 600 px. Обе стороны укладываются в заданную рамку, при этом фотография остаётся узнаваемой.
Маленькие изображения не увеличиваются. Исходник 500 × 300 px при максимальной ширине 1200 px останется 500 × 300 px. Это помогает избежать ложного улучшения: добавленные пиксели не вернули бы детали, которых нет в оригинале. После пересчёта размеры округляются до целых пикселей.
Размеры для карточек, статьи и первого экрана
Сначала выясните ширину блока в вашей вёрстке. Для карточки 400 px можно проверить изображение шириной 800 px на экране высокой плотности. Для статьи ограничение выбирают по ширине колонки. Для фонового баннера учитывают ещё и кадрирование: важный объект не должен оказаться за текстом или уйти за границы на телефоне.
Единого правильного размера для любого сайта нет. Возьмите один типичный экран, подготовьте изображение и проверьте его в браузере. Посмотрите резкость, вес и то, какую версию файл использует на мобильном устройстве. Несколько вариантов размеров и srcset часто полезнее одного крупного файла для всех экранов.
Что меняется после обработки
Изображение декодируется, уменьшается и записывается заново. У JPEG и WebP заданное качество влияет на новый файл даже тогда, когда исходные размеры уже укладываются в ограничения. PNG сохраняется без потерь, но его вес тоже может измениться. В отчёте показан фактический результат, а не обещанное уменьшение.
Прозрачность сохраняется в PNG и WebP. Для JPEG прозрачный фон заменяется выбранным цветом. Исходные метаданные не копируются. Оригинал не меняется, поэтому его можно оставить для дальнейшей подготовки баннеров и других размеров.
Без отправки файлов на хостинг
Все операции и сборка ZIP выполняются на вашем устройстве. Входной файл ограничен 20 мегапикселями, указать можно до 6000 px для каждой стороны. Готовый результат не должен превышать 20 МБ, весь пакет результатов ограничен 80 МБ. Эти ограничения помогают браузеру обработать задачу без чрезмерного расхода памяти.
Анимированные PNG и WebP не принимаются. Если один файл повреждён, рядом с ним появится объяснение. Остальные успешно обработанные изображения можно скачать, не повторяя весь пакет.
Следующий шаг и материалы по теме
Вопросы об инструменте
Можно указать только высоту?
Да. Очистите ширину и задайте высоту. Вторая сторона будет рассчитана с сохранением пропорций.
Почему результат не совпадает с обеими заданными сторонами?
Значения задают максимальную рамку. Изображение вписывается в неё с сохранением пропорций, поэтому одна сторона может оказаться меньше.
Увеличится ли маленькое изображение?
Нет. Инструмент только уменьшает размеры или оставляет их прежними.
Можно сделать квадратную картинку без полей?
Этот инструмент не кадрирует. Для квадрата без полей нужно отдельно обрезать кадр либо настроить его отображение в вёрстке.
