このツールについて
CSS スプライトシートは、アイコンや UI のグリフ、絵文字といった小さな画像一式を 1 枚の大きな画像ファイルにまとめ、CSS の background-position を使って各要素に対して正しい部分だけを表示します。HTTP/2 の多重化以前は、これは意味のあるパフォーマンス上のテクニックでした。十数個の小さなアイコンファイルのために十数本の別々の接続を開くのは、1 枚に結合した画像のために 1 本の接続を開くより遅く、その差は HTTP/1.1 接続や CDN の厳しいリクエスト数制限、あるいは低速な回線でレンダリングをブロックするリソースリクエストを減らしたい場合には、今でも意味を持ちえます。
このツールはその両方を、完全にブラウザ内であなたの代わりに作成します。アイコンファイルをドロップし、横一列か縦一列かのレイアウトと、それぞれの間に入れる透明な余白を選ぶと、ツールはそれらを 1 枚のキャンバスに描画し、透明度を保持するために PNG としてエンコードし、それぞれに対して正確な background-position の CSS ルールを生成します——そのままスタイルシートにコピーしてください。とはいえ、スプライトはやや古い手法です。ほとんどの新規プロジェクトでは、インライン SVG や SVG アイコンフォントの方が保守が簡単で、どんなサイズでもよりきれいに拡大縮小できます。そのため、これを唯一の正解としてではなく、ツールキットの一つの選択肢として扱ってください——すでにラスター形式のアイコン（ベクターではなく PNG）のセットがあり、リクエスト数を減らしたい場合に活用するとよいでしょう。
よくある質問
CSSスプライトはまだ関連性がありますか、それとも代わりにSVGアイコンを使うべきですか？
ほとんどの新しいプロジェクトでは、インラインSVGやSVGアイコンフォント/スプライトが通常より現代的な選択です（どのズームレベルでも鮮明、CSSで簡単に再着色可能、固定ピクセルグリッドの配置問題なし）。CSSスプライトは、ベクター形状として表現できない写真/ラスターアイコンセット、すでにこの技術を中心に構築されたレガシーコードベース、または最小限のHTTPリクエストで小さなアイコンセットをバンドルする高速で依存関係のない方法として、本当に有用であり続けています。実際の制約に合ったものを使用してください——このツールは、ラスタースプライトシートが仕事に適したツールである場合のためにここにあり、それが常に最良の選択であるという主張ではありません。
なぜ最後の画像の後に末尾のパディングが追加されないのですか？
これにより、シートの合計サイズを可能な限り小さく保ちます——パディング設定は、シートが拡大縮小されたときに隣接するアイコン間のテクスチャブリードを防ぐために存在し、これは2つのアイコンが共有する端でのみ懸念事項です。シート自体の外側の端には反対側に隣接するアイコンがないため、そこに余分なスペースがあってもその目的を果たさず、単にファイルサイズを無駄にし、各アイコンの位置によってシートの絶対的な端からの距離に一貫性のない結果をもたらします。