画像分割ツール|9分割やインスタの3分割にきれいに切る
1枚の画像を3×3などの格子や縦方向へ切り分けるツール。グリッド投稿用に投稿する順の番号を付け、割り切れない1pxまで配って継ぎ目をそろえます。まとめてZIPで保存でき、画像は手元のブラウザで処理します。
クリックまたはドラッグ&ドロップで画像を選択
JPEG・PNG・WebP(最大50MB)
分けたい画像を選んでください
格子状のグリッド分割と、縦に順番へ分けるページ分割を選べます
このツールについて
使い方・特徴・補足情報
画像分割とは
画像分割は、1枚の画像を格子状や縦方向へ切り分けるツールです。
3×3や3×1のプリセットを押すと、SNSのプロフィールに並べる形にそろいます。
SNSグリッドを選ぶと番号は「投稿する順」になり、右下から順に出せば絵がつながります。
割り切れない端数は先頭の1枚から1pxずつ配ります。継ぎ目に隙間や細い帯が残りません。
長い画像モードにはのりしろがあり、切れ目の行を次の1枚にも残せます。
切り出したタイルはまとめてZIPで保存するほか、1枚ずつ選んで保存する形も選べます。
こんな人におすすめ
SNSや資料に画像を載せる人
楽になること
1枚を複数枚へ切り分ける
避けたい手間
継ぎ目や並び順がずれること
解決できる困りごと
- 画像編集アプリで選択範囲の座標を数えながら切り出す作業が、プリセットを押すだけで終わる
- 割り切れない寸法で継ぎ目が1pxずれたり、右端に細い帯が残ったりするのを防げる
- グリッド投稿で並べる順番を取り違え、絵が崩れてから貼り直す手戻りがなくなる
- 長い記事のスクリーンショットを等分したときに、切れ目で行が読めなくなるのを避けられる
- 9枚のタイルを1枚ずつ書き出して名前を付ける手間が、ZIPのまとめ保存で済む
使い方
- 「クリックまたはドラッグ&ドロップ」の枠に画像を1枚入れます。
- 分けかたを選びます。プロフィールを一面にするなら「SNSグリッド 3×3」を押します。
- 長い画像を読みやすく分けるときは「長い画像を順番に分ける」を選び、のりしろを入れます。
- プレビューで枚数と、各タイルの実寸の内訳を確かめます。
- 詳細設定で出力形式と番号の意味を選びます。グリッド投稿なら「投稿する順」のままにします。
- 「まとめて保存(ZIP)」を押すか、タイルごとの保存ボタンで1枚ずつ端末に保存します。
使用例
プロフィールを一面の絵にする
9枚に切った例です。ファイル名の post01 が最初に投稿するタイル、つまり右下を指します。
入力
art.png(1080 × 1080)
分けかた: SNSグリッド 3×3 / 番号: 投稿する順
出力
art_post09_r1c1.png … art_post01_r3c3.png(9枚 / 各 360 × 360)
幅の内訳: 360・360・360 px / 高さの内訳: 360・360・360 px
割り切れない幅を3列に切る
1000pxを3列にした例です。余りの1pxが左端の1枚に入り、合計は元の幅と一致します。
入力
photo.jpg(1000 × 600)
分けかた: SNSグリッド 3×1 / 出力: PNG
出力
photo_post03_r1c1.png(334 × 600)
photo_post02_r1c2.png(333 × 600)/ photo_post01_r1c3.png(333 × 600)
長いスクショをのりしろ付きで分ける
縦に長い画面を1200pxずつ切った例です。80pxの重なりがあるので切れ目の行が両方に写ります。
入力
screenshot.png(750 × 4000)
分けかた: 長い画像を順番に分ける / 高さ 1200px / のりしろ 80px
出力
p1: 0〜1200px / p2: 1120〜2320px / p3: 2240〜3440px / p4: 3360〜4000px
4枚(最後の1枚だけ高さ 640px)
活用シーン
プロフィールを一面の絵にする
1枚のイラストを9枚へ切り、プロフィールの3列に並べます。投稿する順の番号が付くので迷いません。
横一列の3分割で見出しを作る
横長のバナーを3枚に切り、プロフィールの一段を見出しのように使います。文字の位置は切る前に決めます。
長い記事のスクショを分けて送る
縦に長い画面を読める単位へ切ります。のりしろを付けると、切れ目の行が次の1枚にも残ります。
資料の図を分けてスライドへ配る
1枚にまとめた図を列ごとに切り出し、スライドへ1つずつ貼ります。切り抜き位置の目分量がいりません。
大きな絵を紙に分けて印刷する
1枚の絵を4分割や9分割にして、A4用紙へ順番に印刷します。貼り合わせると大きな掲示物になります。
並べた写真を1枚ずつに戻す
田の字に並べて保存した写真を、元の4枚へ切り戻します。等分で並べた画像なら位置がそろいます。
技術的な解説
補足: 仕組み
切り出しはCanvasのdrawImageに元画像の矩形をそのまま渡し、等倍でコピーします。
拡大縮小をしないので、imageSmoothingEnabledを切って隣の画素が混ざらないようにしています。
端数はMath.floorで基本の長さを出したあと、余りを先頭のタイルから1pxずつ足す形です。
ZIPはfflateのストリーミングで組み、書き出したタイルから順に詰めていきます。
もっと詳しく
グリッド投稿は右下のタイルから出す
SNSのプロフィールは、新しい投稿が左上に入り、右へ・下へと古い投稿が並びます。
つまり9枚を左上から順に投稿すると、並びが逆になって絵が崩れます。
このツールの「投稿する順」は右下を1番として振っています。ファイル名のpost01から順に出せば、意図した並びになります。
余白を足す・縮める・切り分けるの使い分け
投稿先の比率に合わせる方法は3つあります。余白を足す、寸法を縮める、切り分けるです。
端が切れるのを防ぎたいなら余白追加、容量や表示サイズを合わせたいならリサイズを選びます。
切り分けるのは「1枚を複数枚として見せたい」ときだけです。目的が違うと仕上がりも変わります。
のりしろを付けるとよい画像・不要な画像
のりしろは、切れ目で文字や表の行が途切れるのを防ぐための重なりです。
長い記事や会話の画面を分けるときは、40〜100pxほど重ねると読み手が迷いません。
逆にグリッド投稿では重なりが二重に写り、絵がずれて見えます。プリセットでは入力欄を出しません。
よくある質問
分割した画像はどの順番で投稿しますか?
ファイル名のpost01から順に投稿します。プロフィールは新しい投稿が左上に入るため、右下のタイルを最初に出すと意図した並びになります。
分割すると画質は落ちますか?
PNGで書き出す設定なら、拡大縮小をしない等倍のコピーなので画素はそのまま残ります。JPEGやWebPを選んだときだけ再圧縮が入り、細い線や文字がわずかに眠くなります。
とても大きな画像も分割できますか?
1辺30,000px・合計4,000万画素までです。これを超えるとタブが落ちる恐れがあるので、読み込んだ時点でエラーとして知らせます。
何枚まで分割できますか?
列と行はそれぞれ10まで、合計は100枚までです。1枚の幅や高さが1px未満になる指定は、黙って通さずエラーで知らせます。
分割した画像の大きさがそろわないのはなぜですか?
元の寸法が分割数で割り切れないときは、1px単位の差が必ず出ます。余りは先頭のタイルから配り、合計が元の寸法と一致するようにしているので、内訳を画面で確かめてください。
画像はどこかに送信されますか?
読み込んだ画像は端末の中だけで処理し、ファイルの中身を外部へ送る仕組みは持っていません。ZIPの組み立ても開いているブラウザの中で終わります。
関連記事
このツールの使い方や活用例をブログでも紹介しています。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。