CodeKitHubЧто это за инструмент?
Разделитель изображений делит одно исходное изображение на сетку меньших плиток одинакового размера, чаще всего для тренда «сеточного макета» в Instagram, когда одно широкое фото или иллюстрация публикуется как последовательность отдельных квадратных изображений, которые складываются обратно в оригинал при просмотре вместе на сетке профиля.
Сама техника — простая геометрия: ширина и высота исходного изображения делятся на количество столбцов и строк, и каждый получившийся прямоугольник вырезается как отдельный файл — но точно сделать это вручную в обычном фоторедакторе кропотливо и чревато ошибками, особенно для сетки 3x3 и больше, где небольшой перекос одной плитки сбивает всю последовательность.
Этот инструмент точно вычисляет границы сетки на основе реальных пиксельных размеров изображения и рендерит каждую плитку с помощью HTML5 Canvas API полностью в вашем браузере, поэтому каждая плитка совпадает идеально, а само изображение никогда не покидает ваше устройство.
Зачем его использовать?
- Вы вложили душу в иллюстрацию и хотите опубликовать её эффектом сетки в Instagram, но уже сталкивались с тем, что при ручной нарезке на 9 частей в фоторедакторе одна плитка съезжает на пару пикселей, и швы сетки получаются кривыми — этот инструмент делит с точностью до пикселя, избавляя от такой ошибки.
- Хотите опубликовать широкую панораму как последовательность карусельных постов, но не уверены в точности «на глаз», где делать разрезы — достаточно выбрать сетку 1x4 или 1x3, и точки разреза расставятся автоматически и равномерно.
- Обрезать и сохранять девять плиток по одной так утомительно, что вы всегда бросаете на середине — кнопка «Скачать все (ZIP)» сразу выдаёт все девять пронумерованных файлов.
- Хочется заранее увидеть, как это будет выглядеть в сетке, до публикации — предпросмотр в браузере показывает плитки ещё до скачивания, так что можно заметить, если лицо оказалось разрезано в неудачном месте.
- Хотите протестировать одно и то же изображение в сетке 2x2 и 3x3, чтобы понять, какая лучше подходит композиции иллюстрации — достаточно переключить вариант в выпадающем списке и сгенерировать заново сколько угодно раз.
- Не хочется загружать ещё не опубликованную иллюстрацию или личное фото на онлайн-сервис редактирования — этот инструмент обрабатывает всё в Canvas браузера, не отправляя изображение ни на какой сервер.
Как использовать
- Нажмите на область для перетаскивания (или перетащите файл), чтобы выбрать изображение с устройства.
- Выберите размер сетки — 1x2, 1x3, 2x2, 3x3 или 1x4 — из выпадающего списка.
- Просмотрите получившиеся плитки сразу под настройками.
- Нажмите «Скачать все (ZIP)», чтобы получить каждую плитку в виде пронумерованного PNG-файла в одном ZIP-архиве.
Пример
Ввод
Квадратное фото 1200×1200px, сетка: 3x3Результат
9 плиток по 400×400px каждая, tile-1.png — tile-9.pngПлитки пронумерованы слева направо, сверху вниз — в том же порядке, в котором вы бы загружали их в Instagram (начиная с нижней правой плитки и двигаясь назад, чтобы по мере публикации новых постов старые плитки сдвигались вниз, и сетка складывалась правильно).
Распространённые размеры сетки и их применение
Разные размеры сетки подходят для разных типов постов и «reveal».
| Сетка | Плитки | Типичное применение |
|---|---|---|
| 1x2 | 2 | Простое сравнение «до/после» или двухчастный reveal |
| 2x2 | 4 | Небольшой квадратный reveal, быстро публикуется |
| 1x3 | 3 | Один ряд из трёх последовательных постов |
| 3x3 | 9 | Полный захват сетки профиля — классический сеточный макет Instagram |
| 1x4 | 4 | Широкая панорама, разделённая на четыре поста в ряд |
Похожие инструменты
Для другого локального редактирования изображений попробуйте эти инструменты.
→ Изменение размера изображения · Компрессор изображений · Обрезка изображений
Как не ошибиться с порядком публикации
Частая ошибка в сетке 3x3 — публиковать плитки по порядку номеров (начиная с tile-1), из-за чего изображение в итоге складывается вверх ногами. Поскольку Instagram показывает самые новые посты в верхнем левом углу, реальный порядок публикации должен быть обратным номерам — начиная с tile-9 (нижний правый угол) и заканчивая tile-1 (верхний левый угол).
Публикация других фото в процессе тоже мешает — посторонний пост вклинивается в середину сетки и ломает иллюзию. Самый надёжный способ добиться нужного эффекта — опубликовать все девять плиток подряд, не чередуя с другим контентом.
Часто задаваемые вопросы
Какой размер сетки использовать для сетки профиля Instagram?
3x3 (9 плиток) — самый распространённый выбор, поскольку он ровно заполняет стандартный трёхколоночный вид профиля Instagram. Разбивка 2x2 или 1x3 подходит для меньшего «reveal», который не занимает всю вашу недавнюю сетку.
В каком порядке публиковать плитки?
Поскольку сетка Instagram показывает новые посты первыми (сверху слева), обычно нужно публиковать плитки в обратном порядке — начиная с нижней правой плитки сетки и заканчивая верхней левой — чтобы к моменту публикации всех плиток они читались правильно слева направо, сверху вниз.
Должно ли изображение быть идеальным квадратом?
Нет, но для симметричного сеточного макета (например, 3x3) квадратное исходное изображение даёт квадратные плитки, что соответствует тому, как Instagram обрезает квадратные сеточные посты. Изображение не квадратной формы всё равно разделится равномерно, но на прямоугольные, а не квадратные плитки.
В каком формате сохраняются плитки?
Каждая плитка экспортируется в виде PNG-файла внутри скачанного ZIP-архива, что сохраняет качество без потерь при повторном сжатии.
Загружается ли моё изображение куда-либо?
Нет. Изображение считывается напрямую в вашем браузере и разделяется с помощью Canvas API полностью на стороне клиента. Ничего не отправляется на сервер — ZIP-файл также собирается локально в вашем браузере.
Как определяется разрешение каждой плитки?
Ширина и высота исходного изображения делятся поровну на количество столбцов и строк выбранной сетки. Например, изображение 1200×1200px, разделённое сеткой 3x3, даёт плитки по 400×400px каждая. Чем выше разрешение исходного изображения, тем выше разрешение каждой плитки.
Что происходит, если размеры изображения не делятся ровно на число столбцов и строк сетки?
Даже если количество пикселей не делится идеально, инструмент вычисляет границы каждой плитки максимально равномерно. Тем не менее для самого предсказуемого результата при публикации стоит заранее обрезать изображение до размеров, которые делятся точно на выбранную сетку.
Для чего нужны асимметричные сетки вроде 1x2 или 1x4?
Сетка 1x2 подходит для простого эффекта «до/после» из двух частей рядом, а 1x4 — для разбивки широкой панорамы на четыре последовательных поста. В отличие от квадратных сеток 3x3 или 2x2, они дают вытянутые прямоугольные плитки в один ряд.
Можно ли использовать разделённые изображения не только в Instagram?
Да. Полученные плитки — это обычные PNG-файлы, поэтому они подходят не только для сеточных постов в Instagram, но и для любой задачи, где нужно несколько равных частей: аналогичного эффекта в другой соцсети или даже разбивки на панели для печати.