対応形式と，選択順を保つ画像読み込み
CSSスプライト画像ジェネレーターは，PNG・JPEG・GIF・WebPの4形式を複数選択またはドロップし，1枚の透明PNGと位置指定用CSSへまとめるツールです．SVG，BMP，ICOは入力対象ではありません．画像を選択するとブラウザが非同期でデコードしますが，一覧へはファイル選択時の順序を保って追加します．
ファイルのMIMEタイプが対応4形式のどれかであるかを先に確認し，タイプ情報が空の場合だけ拡張子を補助に使います．拡張子やタイプ表示だけで内容の正当性を保証せず，最後は実際にブラウザが画像をデコードできたかで判定します．破損ファイル等が1件失敗しても，その他の正常な画像は追加し，失敗したファイル名と理由を画面に表示します．
一覧に保持できるのは最大100件です．また，1枚ごとの幅と高さはいずれも4,096px以下に制限しています．上限を超えた分や，一辺が上限より大きい画像は追加しません．これらは画像仕様に定められた一律の上限ではなく，ブラウザのメモリ使用量と後続のCanvas描画を考慮して本ツールが設けた値です．
読み込み用のObject URLは，デコードが成功したときも失敗したときも，処理終了後に破棄します．このURLはツール内でBlobを参照するための一時的な値であり，アップロード先や公開URLとして使うものではありません．
縦・横・グリッドの座標計算
読み込んだ画像は「縦並び」「横並び」「グリッド」の3通りで配置できます．どの配置も現在のアセット一覧の順序を基準にします．一覧の上下ボタンで画像を1件ずつ移動し，その順に座標とCSSクラスを作り直せます．画像サイズ順の並べ替えや，空き領域への自動充填は行いません．
縦並びでは，すべての画像をX=0の左端に揃えます．先頭をY=0とし，その画像の高さと指定余白を足した位置へ次の画像を置きます．結合画像の幅は一覧中の最大幅，高さは各画像の高さと画像間の余白の合計です．最後の画像の下へは余白を追加しません．
横並びはこの計算を横方向に行います．各画像はY=0の上端に揃え，前の画像の幅と余白を加えたX座標へ配置します．全体の高さは最大の画像高，幅は画像幅と画像間余白の合計です．サイズの違う画像を含む場合，縦並びの右側や横並びの下側に透明領域が残ることがあります．
グリッドは2〜10列から選び，指定列数ごとに改行します．行の中では画像幅と余白をX座標へ順次足し，次の行のY座標は直前の行で最も高い画像と余白で決めます．そのため，高さの異なる画像が同じ行にあっても次行と重なりませんが，短い画像の下には透明な空きが生じます．
画像間の余白は0〜50pxです．グリッド内のカラム幅を一定にする処理ではなく，その行にある各画像の実際の幅に続けて余白を加えます．均等セルの表を作る機能ではないため，整列した見た目が必要なら，元画像の寸法を先に揃えます．
Canvasへの原寸描画とPNG出力上限
配置座標が決ると，透明状態のCanvasへ各画像を原寸のまま描画します．画像ごとの幅・高さは入力時のデコード寸法を使い，スプライト生成中に拡大・縮小しません．品質スライダー，圧縮率，色数削減，トリミング，背景透過処理もありません．元画像のサイズや背景を変えたい場合は，別の画像編集手段で整えた後に追加します．
入力にGIFとWebPを含められますが，出力は常に1枚のPNG静止画です．アニメーションGIFやWebPの時間軸と全フレームは保持しません．ブラウザがデフォルトとして扱う画像または最初のフレームに相当する静止画面がCanvasに取り込まれます．アニメーションを維持した結合データが必要な用途には使えません．
最終的なCanvasは，幅と高さがそれぞれ8,192px以下，かつ33,554,432画素以下である場合だけ出力処理へ進みます．たとえ両辺が8,192px以下でも，幅×高さが画素上限を超えれば生成しません．配置，列数，余白，画像数を変えて上限内に収めます．
この出力上限もCanvas仕様の共通上限ではありません．ブラウザや端末のメモリ状況によっては，本ツールの値以下でもCanvas確保，2D context取得，描画，PNG Blob化に失敗する可能性があります．失敗時はエラーを表示し，画像数や寸法を減らして再試行できるようにしています．
共通クラスとbackground-positionの組み立て
生成するCSSは，すべての画像に共通する「ベースクラス」と，1画像ごとの「個別クラス」に分けられます．初期接頭辞がsprite-なら，共通クラスは.sprite-baseです．ここにbackground-image: url('sprite.png')，background-repeat: no-repeat，display: inline-blockをまとめます．
個別クラスには，元画像の幅と高さ，およびスプライト内座標の符号を反転したbackground-positionを出力します．たとえば対象画像の左上がX=48px，Y=32pxなら，background-positionは-48px -32pxです．座標が0の軸は-0pxではなく0と表示します．指定した幅と高さの要素から背景画像の対応領域を見せる構造です．
利用時は，同じ要素へ共通クラスと個別クラスの両方を付けます．例えばclass="sprite-base sprite-arrow"のように使います．この2クラス構成はCSS仕様が必須とする形式ではなく，同じbackground-image等の宣言を各クラスに繰り返さないための出力設計です．
背景画像名は常にsprite.pngとしてCSSを作ります．ダウンロードしたPNGを別名で保存する場合，CDNや別ディレクトリから配信する場合は，background-imageのURLを実際の配置に合わせて変えます．このツールはHTMLの利用例，CSSファイル，ZIP，Data URIを出力せず，画面上のCSSコードとPNGファイルを個別に取得する方式です．
ファイル名由来の部分は，スペース，日本語，記号等をハイフン中心のASCII文字列へ整形します．空になる名前はimageで補い，数字始まりならitem-を先頭へ加えます．同名，整形後の同名，予約用のbaseと衝突する場合は，-2，-3の連番で区別します．接頭辞も同様にASCII断片へ整形しますが，導入先の既存CSS全体との名前衝突まで検出するものではありません．
結果の無効化，コピー，保存とエラー
画像の追加・削除・並べ替え，配置方法，グリッド列数，余白，CSSクラス接頭辞のどれかを変えると，それまでのPNGプレビューとCSSは画面から破棄されます．現在の一覧・設定と旧結果が混在しないための動作です．変更後は「スプライト画像を生成」をもう一度押します．設定変更のたびに自動生成する仕組みではありません．
PNG変換は非同期処理です．変換開始後に設定が変わり，古い変換が遅れて完了した場合でも，そのPNGとCSSを現在の結果として復活させない世代番号を持っています．PNG Blobが完成した場合に限り，同じ設定から作ったCSSとともに表示します．Canvas描画が成功したように見えても，PNG化が失敗すれば不完全な結果は確定しません．
生成後は「スプライト画像」タブで結合PNG，「CSSコード」タブでクラス定義を確認できます．保存ボタンはPNGをsprite.pngとしてダウンロードします．コピーボタンはClipboard APIへCSSを書き込み，成功した場合だけコピー完了状態に変わります．権限，ブラウザ設定，埋め込み環境等で失敗した場合は，コード欄を選択して手動コピーする案内を出します．
プレビュー用のPNG Object URLは，設定変更，次の生成，ページから離れる際に破棄します．そのため，プレビューの一時URLをWebサイト用の永続URLとして使うことはできません．必要なPNGは設定変更前に保存し，実プロジェクトのアセット配置へ移します．
性能判断，非対応機能と公開前確認
CSSスプライトは複数の小画像を1リソースにまとめるため，個別画像のリクエスト数は減らせます．一方で，それが実際の表示速度を改善するとは限りません．HTTP/2やHTTP/3では複数リソースの配信特性がHTTP/1.1と異なり，個別ファイルの方がキャッシュや差し替えの単位を小さくできる場合もあります．
スプライト内の一部しか使わないページでも，結合PNG全体を取得することになります．その結果，リクエスト数は減っても不要な画像データが含まれ，転送量やデコード負荷が有利にならないことがあります．表示頻度，ページ間の共有範囲，更新頻度，キャッシュ設定，ファイルサイズを含めて判断します．LCPやCore Web Vitalsの改善をこのツールが保証するものではありません．
本ツールは，SVGスプライト，symbol，アイコンフォント，Retina用@2x検出，background-size，レスポンシブ画像，メディアクエリを生成しません．二次元ビンパッキング，面積最小化，余白の自動最適化も非対応です．スプライト画像全体のプレビューはできますが，生成CSSを適用した個々のアイコンを自動再現して比較する画面はありません．
公開前には，PNGとCSSを同じ生成回から取得したか，background-imageのURLが配置先と合うか，共通・個別の両クラスを付けたか，既存CSSと名前が衝突していないかを確認します．高解像度表示への適応が必要なら，実際の画像寸法と表示寸法に合わせてCSSを別途設計します．
キーボード操作，コントラスト，アイコンの代替テキストはスプライトCSSだけで完成しないため，HTMLとUIの設計で補います．
入力画像の著作権，商標，利用規約，人物の肖像等は本ツールで判定しません．CSSとPNGが生成できることは，元画像を公開・再配布できる許可を意味しません．自分が使用できる画像か，サイト上での表示と配信に必要な条件を満たすかを確認してから導入してください．