Чаще всего сюда приходят с двумя скриншотами: интерфейс на телефоне рядом с версией для ноутбука, четыре фотографии товара для объявления, куда можно приложить только одну картинку, или чек и накладная в одном файле для авансового отчёта. Размер результата в пикселях подписан прямо под предпросмотром: три картинки 1200 × 800 столбиком с отступом 16 px дают ровно 1200 × 2432 px. Всё рисуется на canvas в браузере, поэтому файлы никуда не уходят, а страница продолжает работать даже после того, как интернет отключился.
Что такое инструмент для объединения изображений
Инструмент для объединения изображений берёт два или больше отдельных файла с картинками и рисует их в одно новое изображение. В ряд слева направо, столбиком сверху вниз или сеткой. Получается один PNG или JPG, который ведёт себя как любая другая картинка: прикрепить, вставить, загрузить, распечатать.
Это нужно постоянно и почти никогда — для чего-то сложного. Два скриншота, которые должны ехать вместе в отчёте об ошибке. Пара «до и после» для объявления. Мобильная версия страницы рядом с десктопной. Четыре фотографии товара для площадки, которая принимает ровно одну картинку. Чек и конверт, собранные в один файл для возмещения расходов. Реальной работы здесь пять секунд, а обычный путь к ней — открыть графический редактор, войти в аккаунт, выбрать ненужный шаблон и выгрузить файл в обход водяного знака.
Инструмент на этой странице принимает от 2 до 10 файлов — PNG, JPG, WebP, GIF, BMP или HEIC с iPhone, — раскладывает их так, как вы выбрали, и отдаёт один файл. Рисование идёт на canvas внутри браузера, поэтому картинки никогда не покидают устройство. Откройте вкладку «Сеть» в инструментах разработчика, пока пользуетесь страницей: наружу не уходит ничего, что несло бы ваши изображения.
Как объединить изображения в браузере
Пять шагов, два из них необязательные.
- Добавьте изображения. Перетащите их на поле, нажмите на него, чтобы выбрать файлы, или вставьте прямо из буфера обмена через Ctrl+V (Cmd+V на Mac). От двух до десяти файлов, до 20 МБ каждый.
- Расставьте порядок. У каждой картинки своя строка с миниатюрой, именем файла и размером в пикселях. Кнопки со стрелками сдвигают её раньше или позже, × убирает. Порядок в этой полосе — это порядок в результате.
- Выберите раскладку. В ряд, Столбиком или Сетка. Предпросмотр перерисовывается сразу — искать кнопку «Объединить» не нужно, потому что предпросмотр и есть результат.
- При желании настройте. Ползунок отступа от 0 до 100 px добавляет расстояние между картинками. Выбор цвета заливает это расстояние и любые поля; по умолчанию — прозрачный. Выберите PNG, чтобы сохранить прозрачность, или JPG, чтобы файл был меньше.
- Скачайте. Файл сохраняется как
combined-image.pngилиcombined-image.jpg. Кнопка «Копировать изображение» вместо этого кладёт его в буфер обмена, готовым к вставке в чат или документ.
На ноутбуке самый быстрый путь — вставка. Сделайте скриншот через Shift+Cmd+4 или «Ножницы» в Windows, нажмите Ctrl+V на этой странице, сделайте второй, вставьте снова — оба изображения уже внутри, и предпросмотр уже нарисован. Ни диалога выбора файлов, ни папки «Загрузки».
Три раскладки и когда какая подходит
| Раскладка | Расположение | Форма результата | Для чего |
|---|---|---|---|
| В ряд | Слева направо, в вашем порядке | Широкая | «До и после», два скриншота с телефона, сравнение |
| Столбиком | Сверху вниз | Высокая | Длинная переписка, нумерованные шаги, страница с прокруткой по частям |
| Сетка | Строки и столбцы, заполняются слева направо | Почти квадратная | Фотографии товара, листы миниатюр, четыре чего угодно |
Сетка сама выбирает число столбцов: квадратный корень из количества изображений, округлённый вверх. Четыре картинки дают 2 столбца и 2 строки. От пяти до девяти — 3 столбца. Десять — 4 столбца в 3 строки, последняя строка заполнена частично. Это правило каждый раз даёт форму, максимально близкую к квадрату, — именно этого почти все и ждут от сетки, и именно так она лучше всего читается в переписке.
Разбор на числах: два скриншота в один файл
Допустим, у вас есть десктопный скриншот 1920 × 1080 px и мобильный 1170 × 2532 px — обычный снимок с iPhone. Одна страница, два устройства, один отчёт об ошибке. Вот что даёт каждая настройка, в реальных пикселях:
| Что на входе | Раскладка | Размеры | Отступ | Результат |
|---|---|---|---|---|
| 2 × 1170 × 2532 | В ряд | Подогнать | 0 px | 2340 × 2532 px |
| 1920 × 1080 + 1170 × 2532 | В ряд | Подогнать | 0 px | 2419 × 1080 px |
| 1920 × 1080 + 1170 × 2532 | В ряд | Оставить как есть | 0 px | 3090 × 2532 px |
| 4 × 1080 × 1080 | Сетка | Подогнать | 12 px | 2172 × 2172 px |
| 3 × 1200 × 800 | Столбиком | Подогнать | 16 px | 1200 × 2432 px |
Вторую строку стоит прочитать внимательно — именно она удивляет. Подгонка двух изображений совсем разной формы опускает высокий мобильный скриншот до высоты десктопного, до 1080 px, и он становится 499 px шириной. Общая ширина: 1920 + 499 = 2419. Третья строка — та же пара без масштабирования: оба изображения в своих пикселях, более короткое по центру полотна высотой 2532 px, а фон заливает место сверху и снизу.
Обратите внимание и на четвёртую строку. Четыре квадрата по 1080 px с отступом 12 px дают 2172 px, а не 2184: отступы стоят между изображениями и никогда по внешнему краю. Один отступ между двумя столбцами, один между двумя строками. 1080 + 12 + 1080 = 2172.
Подогнать или оставить как есть
Два режима размера закрывают почти всё.
Подогнать
Каждое изображение масштабируется так, чтобы общая сторона совпала: одинаковая высота в ряду, одинаковая ширина в столбце, одинаковые ячейки в сетке. Стык получается чистым, без полей, и результат читается как одна картинка, а не как коллаж.
Масштабирование всегда идёт к самому маленькому изображению, а не к самому большому. Объедините миниатюру 100 × 100 с фотографией 200 × 200 — получите 200 × 100 px: большая опускается к маленькой. Это осознанное решение. Растянуть миниатюру в 200 px до 4000 px не вернёт деталей, которых там никогда не было, — выйдет мягкое блочное пятно рядом с резкой фотографией, и никакая последующая настройка это не отменит. Уменьшить резкую — значит оставить резкими обе половины.
Оставить как есть
Ничего не масштабируется. Каждое изображение сохраняет свои пиксели, а более короткие дополняются вашим цветом фона. Появляется управление выравниванием: оно решает, стоит дополненная картинка сверху, по центру или снизу своего места. Берите этот режим, когда важны точные размеры в пикселях — скриншот, в который потом будут всматриваться, скан, который должен остаться в 300 dpi, макет, который вы позже снова разрежете.
Если вы объединяете изображения, которые изначально были очень разными по размеру, и ни один режим не выглядит хорошо, исправлять обычно надо раньше: сначала прогоните их через изменение размера изображения до общей ширины, а потом объединяйте. Подогнать входные файлы проще, чем воевать с результатом.
Где объединение изображений ломается
У каждого из этих случаев есть конкретная причина и конкретное решение, и большинство инструментов молча спотыкается хотя бы об один.
Результат выходит пустым
Браузеры перестают рисовать canvas примерно после 16 000 пикселей по любой из сторон, и Safari на телефоне строже всех: он возвращает чистый белый лист вместо ошибки — именно поэтому некоторые инструменты молча отдают пустой файл. Десять фотографий 2000 × 2000 в ряд запросили бы 20 000 × 2000 px. Здесь это пропорционально уменьшается до 16 000 × 1600 px, и об этом прямо сказано над кнопкой скачивания. Если нужно полное разрешение — объедините в два прохода или поставьте столбиком вместо ряда.
Прозрачные области становятся чёрными
У JPG нет альфа-канала, поэтому прозрачность в этом формате не выживает. Обычная ошибка — прозрачные пиксели записываются чёрным, и это убивает логотип или скриншот со скруглёнными углами. Здесь прозрачный фон при выборе JPG сводится к белому или к тому цвету, который вы задали. Чтобы сохранить прозрачность, оставайтесь на PNG — он стоит по умолчанию именно поэтому.
Фотография с телефона лежит на боку
Телефоны часто сохраняют снимок в ориентации сенсора плюс тег, который говорит просмотрщику повернуть картинку. Инструменты, игнорирующие этот тег, выдают склейку, где одна фотография лежит плашмя. Здесь каждое изображение декодируется с применённой ориентацией, поэтому предпросмотр совпадает с тем, что вы видите в галерее.
В наборе оказался не файл изображения
Перетащите папку — и рано или поздно поймаете случайный PDF или .txt. Такой файл пропускается по имени, а всё остальное объединяется как обычно: терять весь выбор из-за одного плохого файла — грубый ответ на перетаскивание. Анимированные GIF принимаются по первому кадру, и инструмент об этом говорит, а не оставляет вас гадать, куда делось движение.
Чем это не является
Это одна задача, сделанная до конца: несколько изображений на входе, одно на выходе. Это не фоторедактор. Нет обрезки, нет поворота, нет фильтров, нет текстового слоя, нет наклеек, нет сохранённых проектов. И это не урезанная версия чего-то большего — это весь инструмент целиком, а то, чего не хватает, не хватает намеренно. В тот момент, когда у такого инструмента отрастает редактор, он превращается в то самое, от чего вы уходили, когда пошли его искать.
Части, из которых сложился бы редактор, уже существуют отдельными страницами: обрезка изображений — чтобы подрезать, сжатие изображений — когда склеенный файл слишком тяжёл для письма, конвертер форматов изображений — чтобы поменять то, с чем вы остаётесь, и изображение в PDF — когда на другом конце ждут документ, а не картинку. Каждая делает одно дело, каждая открывается мгновенно, и ни одна не спрашивает, кто вы.
Вот разница, которую стоит назвать. Обычный способ склеить две картинки в интернете — это либо сайт, который загружает ваши файлы на чей-то сервер и возвращает их с водяным знаком в углу, либо целая дизайн-платформа за аккаунтом, ценой за рабочее место и пробным периодом, часы которого запускаются ради тридцатисекундной задачи. Обе модели построены вокруг того, чтобы вас удержать, а не чтобы закончить работу. На этой странице нет аккаунта, нет водяного знака, нет заслонки на выгрузке и нет дневного лимита — и она работает одинаково, собираете вы объявление как фрилансер, лабораторную как студент или делаете это на рабочем ноутбуке в два часа ночи.
Частые вопросы
Можно объединять изображения на телефоне?
Да. Страница работает в мобильных браузерах, а выбор файлов открывает галерею, так что можно отметить сразу несколько фотографий. Два момента для телефона: снимкам HEIC нужен шаг конвертации на входе — он занимает мгновение и отмечается, пока идёт, — а очень большие наборы фотографий в полном разрешении чаще всего и упираются в предел canvas. Если на iPhone результат выглядит пустым, произошло именно это, и инструмент сообщит, что уменьшил размер.
Какого размера получится склеенное изображение?
Он напечатан под предпросмотром до скачивания и обновляется при каждом изменении. Грубо: в ряд складывает ширины и берёт общую высоту; столбиком складывает высоты и берёт общую ширину; сетка умножает размер ячейки на число столбцов и строк. Отступы добавляются только между изображениями. Три картинки 1200 × 800 столбиком с отступом 16 px дают 1200 × 2432 px — два отступа, а не четыре.
Теряется ли качество при объединении?
В режиме «оставить как есть» с выводом в PNG — нет, каждый пиксель переносится без изменений. В режиме «подогнать» уменьшенные изображения пересчитываются, и это реальное, но небольшое изменение качества, обычно незаметное на том размере, в котором вы смотрите. Выбор JPG перекодирует всё с высоким качеством и отбрасывает прозрачность. Если нужен самый безопасный результат — «оставить как есть» и сохранение в PNG.
Есть ли лимит на число использований?
Нет. Ни дневного предела, ни аккаунта, ни водяного знака, ни заслонки на выгрузке — объединяйте две картинки или двести пар. Десять изображений за проход — единственный потолок, и склеенный файл можно подать обратно на вход, чтобы пойти дальше. Инструментом можно пользоваться без оплаты, страницу оплачивает реклама, а 10 % от каждого доллара, который зарабатывает Microapp, идут на благотворительность — с верхней строки и с ежеквартальным аудитом.
Как поставить две картинки рядом без графического редактора?
Это короткий ответ ровно на такой запрос. Откройте страницу, перетащите оба изображения, оставьте раскладку «В ряд» и нажмите «Скачать». Если высота разная — это уже учтено: режим по умолчанию выравняет высоты за вас. Если хочется оставить каждое в своём размере с полями, переключите «Размеры» на «Оставить как есть» и выберите, где встанет более короткое.
Можно добавить рамку или расстояние между картинками?
Расстояние — да: ползунок отступа доходит до 100 px, а заданный цвет фона делает это расстояние видимым, а не прозрачным. Белый отступ в 20–40 px — обычный выбор для сравнения, которое вы куда-то публикуете, потому что он не даёт двум картинкам прочитаться как одна. Внешней рамки в этой версии нет. Рабочий приём пока: объедините, а потом прогоните результат через инструмент во второй раз вместе с однотонной картинкой, если нужна полоса-рамка с одной стороны.
Мои изображения куда-нибудь загружаются?
Нет, и верить на слово не обязательно. Файлы читаются с вашего устройства, декодируются, рисуются на элементе canvas и возвращаются вам как скачивание. Сервера в этом пути нет. Откройте инструменты разработчика, перейдите на вкладку «Сеть» и объедините несколько картинок — ни один запрос не несёт ваш файл. Приятный побочный эффект: после загрузки страницы инструмент продолжает работать даже с полностью выключенным соединением.