画像スプライトシートジェネレーター
画像
多くの小さい画像（アイコン、UI 状態、キャラクターフレーム）をダウンロード可能な 1 つの PNG に結合し、それぞれを `background-position` で配置する CSS ブロックを発行する。アイコンフォント、SVG スプライト、または実際のスプライトシートパイプラインが選択肢でないときに HTTP リクエストを削減する。レイアウトは水平ストリップ、垂直ストリップ、または固定列グリッド；シートは各行または列の最大アイテムに合うようにサイズ調整される。ファイルは canvas を介して完全にクライアント側で処理される — アイコンはブラウザを離れない。
—
使い方
- 画像をドロップまたは選択する。OS が引き渡す順序で表示される。
- レイアウトを選ぶ：水平 / 垂直ストリップが最もシンプル、グリッドはより密。にじみを避けるためパディングを設定。
- PNG をダウンロード、CSS をコピー、一緒に出荷する — CSS プレフィックスに入れたクラス名と一致させる。
よくある質問
- スプライトシート vs. SVG スプライト vs. アイコンフォント？
- PNG スプライトはソースが実際のラスター（ゲームアート、写真サムネイル）のときに依然として勝つ。UI アイコノグラフィーには SVG スプライト（`<symbol>` + `<use>`）を好む — スケールし、currentColor に応答する。アイコンフォントは今やほとんどレガシーフォールバック。
- 透明度はどうなる？
- 背景を透明に保つと、PNG はアルファで保存される（プレビューで見えるチェッカーボードは透明な領域を見えるようにするだけ）。白または黒を選ぶと、それらがシートに焼き込まれる。