Switching

複数のPNG画像の結合(縦・横)

アップロードされた順序に従って、複数のPNG画像を縦方向(上から下)または横方向(左から右)に連結し、1枚の画像に結合します。透過背景(透明部分)を含むアイコン、Webサイトのスクリーンショット、グラフや図表などを1枚にまとめたいときに便利です。すべての処理はお使いのブラウザ上で安全に完結します。

PNGファイルを選択してください

複数のファイルをまとめてドラッグ&ドロップできます

ご利用手順

  1. 1

    結合したいPNGファイルをドラッグ&ドロップするか、クリックして選択します。つなぎ合わせたい順序でファイルをアップロードしてください。

  2. 2

    結合する方向(縦方向または横方向)を選択します。縦方向は上から下へ、横方向は左から右へ画像が並びます。

  3. 3

    結合する画像のサイズが揃っていない場合は、位置合わせの基準(揃え方)を設定します。縦方向の結合では「幅の狭い方に合わせる」または「幅の広い方に合わせる」、横方向の結合では「高さの低い方に合わせる」または「高さの高い方に合わせる」を選択できます。PNG形式で出力されるため、サイズ差によって生じる余白部分は透過(透明)のまま保存されます。

  4. 4

    「画像を結合する」ボタンをクリックすると、1枚に結合されたPNG画像が生成されます。生成後はダウンロードボタンからすぐに保存できます。

よくあるご質問

結合される画像の順序はどのように決定されますか?
ファイルをアップロード(追加)した順につなぎ合わされます。縦方向は上から下へ、横方向は左から右へ連結されます。順序を変更したい場合は、一度該当する画像を削除し、ご希望の順番で再度追加してください。
画像ごとにサイズ(幅や高さ)が異なる場合はどのように処理されますか?
縦方向に結合する場合は「幅」、横方向に結合する場合は「高さ」を基準に自動調整されます。「小さい画像に合わせる」を選択すると、最も小さい画像サイズに縮小されて結合されます。「大きい画像に合わせる」を選択した場合は、最も大きい画像サイズに合わせて結合され、サイズの小さい画像の周囲に生じる余白部分は、設定した背景色(指定がない場合は透過)で処理されます。
PNGの透過背景(透明部分)は維持されますか?
はい。出力形式はPNG形式となるため、元の画像に含まれていた透過領域は結合後もそのまま維持されます。また、異なる画像サイズを結合したことによって生じる余白部分も、透過(透明)のまま出力されます。
画像ファイルが外部のサーバーにアップロードされることはありますか?
いいえ、一切アップロードされません。画像の結合・合成処理はすべてお使いのブラウザ(端末)内のみで行われます。サーバーへのデータ送信はなく、Webブラウザのタブを閉じればメモリ上の一時データも完全に消去されます。

透過を保ったままつなげます

複数のPNGを縦につなげて1枚にします。JPGの結合と結果の形は同じですが、決定的な違いが一つあります。PNGはアルファチャンネルに対応しているため、元画像の透明な領域を保ったまま結合できる点です。

出力形式をPNGにしておけば、透明な部分は透明のまま残ります。逆に結果をJPGで保存すると、その瞬間に透明領域が背景色で塗りつぶされます。アイコンセットや切り抜き画像をつなげる作業なら、出力形式を必ず確認してください。

透過画像を結合するときの落とし穴

透過背景の画像を複数つなげると、各画像の幅が違う場合にできる余白も透明のまま残ります。結果だけを見ると問題なさそうですが、あとでその画像を白以外の場所に載せると、思っていた見た目と変わってしまいます。

そのため背景色の設定が重要になります。透過をそのまま維持するのか、特定の色で塗って確定させるのかを先に決める必要があります。結果をどこで使うか決まっているならその背景色で塗るほうが安全で、複数の場所で使い回す素材なら透過のままにしておくほうが柔軟です。

結合できるサイズには上限があります

縦につなぐと高さが加算され続けますが、ブラウザが一度に描画できる画像の一辺は16,384pxです。一度に結合できる枚数も30枚に制限されます。上限を超える場合は、変換を始めずに事前にお知らせします。

計算すると感覚がつかめます。高さ2,000pxの画像なら、8枚で16,000pxに到達します。行き詰まったときは、結合前に各画像をリサイズするか、グループを分けて2回に分けて結合してください。

PNGでつなぐと容量が重くなる場合

PNGは可逆(無劣化)なので原本をそのまま保ちますが、結合結果が重くなることがあります。ただしどれだけ重くなるかは画像の性質によって大きく分かれます。同じサイズの画像を種類別に保存して測ると次のとおりです。

画像の種類PNGJPG 品質80PNGが有利か
アイコン・ロゴ(色数が少ない)23 KB29 KBはい — より小さく無劣化
画面キャプチャ(文字中心)94 KB97 KBはい — 同程度の容量で無劣化
写真(背景が詰まっている)3,591 KB269 KBいいえ — 大きく不利
画像1枚あたり。結合すると枚数分だけ掛け算になります。

アイコンやキャプチャをつなげる作業なら、PNGのままでも容量面の損はありません。逆に写真を何枚もつなげる予定なら、PNGの結果はかなり重くなります。その場合は、透過領域がないことを前提に出力形式をJPGへ変えるのが実用的です。

幅を揃えておけば配置で悩む必要がありません

画像の横幅が異なると狭いほうに余白ができ、左・中央・右のどこに寄せるかを決める必要が生じます。いちばんきれいな解決は、結合前にすべての画像を同じ幅にリサイズしておくことです。そうすれば配置も背景色も気にする必要がなくなります。

透過を保つ必要がある作業

  • 透過背景のアイコンを複数まとめて1枚のスプライト画像にするとき
  • UIのキャプチャを順番につなげて、一連の操作の流れを1枚にするとき
  • 文字や表の多い資料を、つぶれさせずに1枚へ整理するとき
  • 画像を1枚しか投稿できない場所に、複数枚をまとめて載せるとき

関連ガイド

関連ツール