スプライト画像生成

クリックして画像をアップロード

対応形式：PNG, JPG, WebP

050

画像をアップロードしてスプライトをプレビュー

複数の小アイコンをオンラインでCSSスプライトシートに結合。ローカルブラウザで処理するためアップロード不要、横・縦・グリッドの3レイアウトでbackground-positionコードを自動生成します。

関連おすすめ

ICO生成

画像圧縮

画像変換

画像サイズ変更

画像切り抜き

画像回転・反転

スプライト画像（CSS Sprite）とは？

スプライト画像（CSS Sprite）は複数の小画像を1枚の大画像に結合し、background-positionで個別アイコンを表示する技術です。「Sprite」という語は初期のゲーム機に由来し、複数のアニメフレームを1枚の大画像にまとめて順次切替えて表示していました。Webフロントエンドがこの概念を取り入れ、ページ内の大量小アイコンを1枚の画像にまとめて読込みます。

**なぜスプライトが必要？** HTTP 1.1時代では各画像ファイルが1回のHTTPリクエストを発生させ、TCPハンドシェイク、TLSハンドシェイク、リクエストヘッダのオーバーヘッドを伴いました。100アイコン＝100リクエスト。スプライトは全アイコンを1画像に配置し、1リクエストで全アイコン読込を完了、初期描画を大幅に高速化します。HTTP/2マルチプレキシングはこの優位性の一部を低下させましたが、CDNキャッシュ、gzip圧縮、HTTP/1.1互換では依然価値があります。

**基本原理：** 200×60のスプライトに3つの60×60アイコンが横並びと仮定。CSSで60×60要素に`background: url(sprite.png); background-position: 0 0;`で1つ目を表示、-60px 0で2つ目、-120px 0で3つ目を表示します。本ツールはこれらの座標値を自動出力します。

**モダンな代替：** SVG + use/symbol（推奨、ベクター、色変更可、アニメーション可）、Icon Font（互換性高、クロスプラットフォーム）、HTTP/2 Server Push、Web Fontアイコンなど。各方式に適用シーンがあり、プロジェクトの実際の状況に応じて選択してください。

ユースケース

  • Webプロジェクトで大量の小アイコンをスプライトに結合してHTTPリクエストを削減、初期描画を高速化したい場合
  • フロントエンド開発時にプロジェクトアイコンリソースを一元管理し、CSS背景位置コードを自動生成したい場合
  • アイコンリソース準備完了後、スプライト+CSSコードをバッチ生成し、チームへ直接納品
  • 結合後の大画像に[画像圧縮ツール](/image/compress/)を適用して総サイズを縮小、LCP性能指標を最適化
  • App / Electron / デスクトップアプリ内に静的アイコンリソースを1枚にまとめてバンドル
  • メールHTMLテンプレートや静的ブログで、複数アイコンが必要だがメールクライアント互換性の制約がある場合
  • デザイナーがアイコンリソースをスプライト形式で納品し、フロントエンドエンジニアの迅速統合を容易にする
  • Retina画面専用に2x解像度スプライトを出力、background-sizeで1xと2x画面に適応

使い方

  1. アップロードエリアをクリックまたは複数画像をドラッグ&ドロップ（JPG / PNG / WebP / GIFなど対応）
  2. 左の画像リストでドラッグハンドルまたは上下ボタンでアイコン順序を調整
  3. 左のレイアウトエリアで「横」「縦」「グリッド」3種の配置方式から1つ選択
  4. 余白スライダーでアイコン間のピクセル余白を調整（推奨1-5px）
  5. 右側でスプライト効果をリアルタイムプレビュー、確認後「ダウンロード」でPNG保存、「コピー」でCSSコードをプロジェクトへ

特徴

  • 複数画像ワンクリック結合：複数小アイコンまたは画像をアップロードし、1枚のスプライトへ自動結合
  • 3種のレイアウト方式：横、縦、グリッドを自由に切替、様々なシーンに適応
  • 余白調整可能：0-50pxピクセル余白スライダーでアイコン間隔を柔軟制御
  • ドラッグ並び替え：リスト内のアイコンをドラッグして結合順序変更、CSS座標も自動同期更新
  • モバイル並び替え：上下ボタンで順序調整可能、モバイルブラウザでも便利に操作
  • CSS自動生成：各サブ画像のbackground-position、幅・高さを含む完全位置決めコードを自動出力
  • リアルタイムプレビュー：画像・パラメータ変更で即座にスプライト再生成、WYSIWYG
  • ワンクリックCSSコピー：内蔵コピーボタンで完全スタイルシートをクリップボードへ
  • ワンクリックPNGダウンロード：結合後大画像をローカルへ直接保存、ファイル名はsprite.png固定
  • ローカルブラウザ処理：Canvas APIでローカル結合、画像はサーバーにアップロードされずプライバシー保護
  • 複数形式入力：JPG、PNG、WebP、GIFなど主要画像形式のアップロードに対応
  • 透明背景保持：出力PNGは元アイコンの透明チャンネルを保持、アイコン合成に最適

Best Practices

Retina 2x対応：2xソースファイルでスプライト生成

対象ユーザーがRetinaディスプレイ（Mac、iPhone、HiDPI Windows）をお使いなら、2x解像度のソースファイル（例：32×32アイコン）で生成し、CSSでbackground-size: 32px autoを指定して16×16に縮小表示するのがおすすめです。こうすれば1x画面も2x画面も鮮明で、1度の生成で全デバイスに対応できます。

HTTP/2プロジェクトでもスプライトは価値あり

HTTP/2のマルチプレキシングはリクエスト数のボトルネックを緩和しますが、スプライトはCDNキャッシュ再利用、gzip/Brotli高圧縮率、社内プロキシ透過、HTTP/1.1フォールバック対応の4つのシーンで依然優位性があります。企業内ネット、官公庁・銀行システム、メールHTMLテンプレートはHTTP/1.1が主流で、スプライトは代替できません。

PNG-8 vs PNG-24選択：アイコンはPNG-8、グラデはPNG-24

スプライト出力は固定でPNGですが、生成前に適切なビット深度のソースを：単色/1色アイコンはPNG-8（ロスレス透明、PNG-24より60-80%小さい）；グラデーション、影、ハイライトを含むものはPNG-24。本ツールはソース形式を制限しないので、PNG圧縮ツールで事前最適化のうえ結合することをおすすめします。

CDNキャッシュ戦略：ファイル名にハッシュを付けて永続キャッシュ

結合後のsprite.pngは固定ファイル名にせず、コンテンツハッシュ（例：sprite.a3f2b1.png）でリネームして永続キャッシュ（Cache-Control: max-age=31536000）することをおすすめします。ブラウザは1度ダウンロードするだけで、以降のリクエストはローカルキャッシュから配信され、HTTP/2よりも多くのトラフィックを節約します。本ツールのダウンロードファイル名は固定のsprite.pngなので、ダウンロード後にリネームしてください。

gzip / Brotli圧縮でスプライトをより省トラフィックに

結合後の大画像はピクセル値に連続性があるため、gzip/Brotli圧縮率は散在する小画像よりずっと高くなります。Nginx + gzip レベル1でスプライトが60-80%縮小、Brotliで85%以上も。HTTPレスポンスヘッダでContent-Encodingを有効にすれば、1MBのスプライトが実際に200-300KBで配信可能になり、最も過小評価されているスプライトの隠れた利点です。

CSS Modules / Vue scoped対応：:global()でラップ

プロジェクトがCSS ModulesやVue scoped CSSを使う場合、本ツールが出力する.icon-home、.spriteクラス名はローカルハッシュ化され無効になります。.module.cssで:global(.sprite) { ... }で共通クラスをラップし、scopedブロック外で取り込むか、CSS Modulesを使わずBEM命名規則で管理してください。

Icon Fontと併用：コアアイコンはFont、複雑なアイコンはスプライト

実運用で最も安定しているのは併用です。UI汎用小アイコン（設定、閉じる、検索、ユーザー）はIcon Font（色変更可、ベクター、クロスプラットフォーム）、複雑なカラーアイコン（商品ロゴ、運営バナーアイコン）はスプライト。両者のメリットを補完し合い、どちらか一辺倒の保守コストを避けられます。

工学的プロジェクトはspritesmithで自動化、本ツールはプロトタイプ用

長期保守プロジェクトではspritesmith（Webpack）やgulp.spritesmithをビルドフローに組み込むのがおすすめです：ソースコードを変更すれば自動再実行、ハッシュ付きファイル名出力、SCSS/LESS変数も自動生成。本ツールは依存ゼロの迅速なプロトタイプと小プロジェクト納品向けで、CI/CDパイプラインにはビルドプラグインの方が適切です。

モダンはスプライトからSVG symbolへの移行可能

プロジェクトがモダンブラウザ（Chrome / Safari / Firefox / Edgeすべて、IE 11+）をサポートするなら、スプライトからSVG symbolへの移行を検討してください：単一ファイルで全アイコン管理、CSSで色とアニメーションを制御、background-position座標の保守不要。本ツール出力のスプライトは使い捨て資産で、移行前の過渡期ソリューションとして使えます。

よくある質問

スプライト画像とは？なぜ複数画像を1枚に結合するの？

スプライト画像（CSS Sprite）は複数の小画像を1枚の大画像に結合し、background-positionで個別アイコンを表示する技術です。結合後は1回のHTTPリクエストで全アイコンを読み込めるため、一つずつ読み込む場合と比べてリクエスト数を大幅に削減し、初期描画を高速化できます。フロントエンド性能最適化の定番手法です。

オンラインで複数アイコンをスプライトに結合するには？

複数画像をアップロードすればツールが選択したレイアウトで自動結合し、リアルタイムでプレビューします。同時に右側で対応するサブ画像のCSS背景位置コード（background-position）と幅・高さが自動出力され、スタイルシートにコピーして使えます。生成されたスプライトはPNG形式で、ワンクリックでダウンロード可能です。

生成されたCSSコードはどう使う？

ダウンロードしたsprite.pngをプロジェクトディレクトリ（例：/img/sprite.png）に配置し、ツール出力のCSSをスタイルシートに貼り付けます。アイコンを表示したい要素に.spriteクラスと対応する.icon-xxxクラスを追加すればOKです。例：<i class="sprite icon-home"></i>。クラス名はツールが元のファイル名から自動生成します。

どの配置方式に対応している？

3種対応：横並び（アイコンを左から右へ1行に配置）、縦並び（アイコンを上から下へ1列に配置）、グリッド（アイコン数に応じて正方行列へ自動配置、列数は平方根を切り上げ）。左パネルでモード切替してプレビューできます。

アイコン間の余白を調整できる？

可能です。左側にピクセル余白スライダー（0-50px）があり、推奨は1-5pxです。適切な余白はCSS位置決め時のエッジピクセル干渉を防ぎますが、最終使用には影響しません。余白はスプライト内部のスペースで、CSS呼び出し時はbackground-positionの正確な座標のみ使用します。

アイコンの配置順序を変更できる？

可能です。左の画像リストの各画像はドラッグハンドルで並び替えでき、モバイルでは上下ボタンでも順序調整できます。調整後はスプライトが新順で再生成され、CSS座標も同期更新されます。

対応している画像形式は？

JPG、PNG、WebP、GIFなど、すべての一般的な画像形式の入力に対応しています。出力はPNG形式（透明背景を保持）に統一。アイコンはPNG入力が推奨で、PNGの透明チャンネルは結合後のスプライトでも正常に保持されます。

モダンでもスプライトは必要？

HTTP/2普及後、マルチプレキシングがスプライト優位性の一部を低下させましたが、CDNキャッシュ、gzip圧縮、初回描画の重要アイコン読込には依然価値があります。アイコン数が少ない（10未満）または色変更・アニメーションが必要な場合は、SVG symbolやIcon Fontへの移行を推奨します。大量の静的PNGアイコンなら、スプライトは依然安定・信頼性の高い選択肢です。

Retina画面でスプライトがぼやけない？どう対応する？

ぼやけます。Retina画面（Mac、iPhone、HiDPI Windows）は物理ピクセルがCSSの2倍または3倍なので、通常の1xスプライトが2xに引き伸ばされ、端がぼやけます。解決策は2x解像度のソースファイル（16×16の代わりに32×32）でスプライトを生成し、CSSでbackground-size: 32px autoを指定して16×16に縮小表示することです。

アイコン結合で画質は落ちる？

画質の劣化はありません。結合処理は複数画像を大キャンバスの指定位置に配置するだけで、再サンプリング・圧縮・色調整は一切行いません。出力PNGは元の画質を保持します。さらにファイルサイズを削減したい場合は、ダウンロード後に[画像圧縮ツール](/image/compress/)で処理できます。

スプライト画像はサーバーに送信される？安全？

送信されません。すべての画像結合はローカルブラウザ内でCanvas APIを通じて行われ、ファイルはどのサーバーにもアップロードされず、処理後に破棄されます。機密情報を含む社内アイコンや未公開のロゴデザインも安心して処理できます。

生成されたスプライトはどうダウンロードする？

画像アップロード後、ツールが自動でプレビューを生成します。左の「ダウンロード」ボタンをクリックすれば、sprite.pngとしてローカル保存できます。CSSが必要な場合は完全なCSSが自動出力されるので、「コピー」ボタンでクリップボードにコピーできます。

クラス名はカスタマイズできる？

現バージョンではクラス名はツールが元のファイル名から.icon-接頭辞付きで自動生成します。例：home.pngをアップロードすると.icon-homeが生成されます。命名規則（英数字・ハイフン）に従ったファイル名なら、よりクリーンなCSSクラス名が得られます。

スプライト、Icon Font、SVG Symbolのどれを選ぶ？

シーン次第です。大量の静的PNGアイコンまたは古いIE互換が必要ならスプライト、UI汎用小アイコンで色変更・クロスプラットフォームが必要ならIcon Font、モダンで色変更とアニメーション、単一ファイル管理が必要ならSVG Symbolが第一選択。実運用では併用が一般的：コアUIアイコンはIcon Font、複雑なカラーアイコンはスプライト。

結合したスプライト大画像を[画像圧縮ツール](/image/compress/)でさらに小さくできる？

可能です。本ツールはロスレスPNG固定出力のため、サイズが大きくなる場合があります。推奨フロー：本ツールでスプライト生成 → [画像圧縮ツール](/image/compress/)でPNGサイズ縮小またはJPG変換（透明不要時）→ [画像変換ツール](/image/convert/)で必要に応じてWebP変換。ツールの組み合わせで読込性能を最大化できます。

用語集

スプライト画像（CSS Sprite）
複数小画像を1枚の大画像に結合し、background-positionで個別アイコンを表示する技術。Webフロントエンドの古典的性能最適化手法。
background-position
CSSプロパティ、背景画像の表示開始座標を指定。スプライトは負値で背景を左/上にスクロールして対象アイコン位置に表示。例：background-position: -60px 0は60pxオフセット位置のアイコンを表示。
background-size
CSSプロパティ、背景画像の表示サイズを指定。Retina対応キー：2xソースでスプライト生成後、CSSでbackground-size: 32px auto指定で1xサイズに縮小、1xと2x画面で共に鮮明表示。
グリッドレイアウト（Grid Layout）
本ツールのグリッドモードはアイコン数に応じて列数を自動計算（平方根切り上げ）、行優先で正方行列に配置。例：9アイコンは3×3グリッドに。
アイコン余白（Padding）
スプライト内の各サブ画像間のピクセル余白。1-5px推奨、CSS位置決め時のエッジピクセル干渉を防ぐが、最終使用には影響しない——CSS呼び出し時は正確な座標値のみ使用。
PNG透明チャンネル
PNG形式はAlphaチャンネル対応、アイコン背景を透明に設定可能。スプライト出力はPNG形式を保持、透明アイコンも結合後に正常表示。
HTTP/2マルチプレキシング
HTTP/2プロトコルは単一接続上で複数リクエストを並列処理、スプライト優位性の一部を低下。ただしHTTP/2はCDN設定、古いブラウザ互換、gzip圧縮では結合大画像に劣る。
SVG Symbol
SVGの<symbol>要素 + <use>参照機構、全アイコンを1つのSVGファイルに統合、CSSでfill / stroke / アニメーション制御。モダンでのスプライトの第一選択の代替。
DPR（デバイスピクセル比）
Device Pixel Ratio、物理ピクセルとCSSピクセルの比。Retina画面DPR=2、CSS 16×16アイコンは実際には32×32物理ピクセル必要。スプライトのRetina対応コアパラメータ。

スプライト画像3つのレイアウトモード比較

レイアウトモード配置ルール主な用途
横並びアイコンを左から右へ1行に並べるナビゲーション、Tabボタン、水平ツールバー
縦並びアイコンを上から下へ1列に重ねる縦型メニュー、リスト項目の接頭辞、上下構造
グリッドアイコン数に応じて正方形に自動配置汎用、枚数不明時の最良の開始点

スプライト画像のパディング推奨値

余白ピクセル適用シーン使用のアドバイス
0pxアイコン端が綺麗、透明パディング付き極限まで詰めるが端のピクセル干渉の可能性
1-2px高品質アイコン、最小の安全マージン推奨値、コンパクト性と安定性のバランス
3-5px一般アイコン、影・ストロークを含む安全な距離、主流の推奨
6-10pxアイコンサイズ差が大きい、ストロークあり大アイコンが小アイコンを覆うのを回避
10-50pxデバッグ時、目視でのグループ分け開発プレビューのみ、本番非推奨

Retina 2x スプライト画像の対応パラメータ

画面 DPRCSSサイズソースファイルサイズbackground-size
1x16×1616×16auto
2x16×1632×3232px auto
3x16×1648×4848px auto
2x24×2448×4848px auto

Authoritative References