イメージスプライトシート 複数の画像を1つのスプライトシートに結合し、列やスペーシングを自由に設定できます。
イメージスプライトシート
複数の画像を1つのスプライトシートに結合し、列やスペーシングを自由に設定できます。
画像をアップロード
スプライトシート用の複数の画像（アイコン、フレームなど）をドロップまたは選択します。
レイアウトを設定
スプライテンの列の数とパディングを設定します。
生成してダウンロード
スプライトシート画像を生成し、CSS 座標をコピーします。
What Is イメージスプライトシート?
複数の画像を1つの合成画像に組み合わせ、グリッド状に配置し、それぞれのスプライトに対するCSS背景位置座標も生成します。Webパフォーマンス最適化、ゲームスプライトアニメーション、およびアイコンセットに不可欠です。個々の画像をアップロードして、列数と余白を設定すると、このツールは合成PNGとCSSコードのスニペット両方を生成します。
Why Use イメージスプライトシート?
-
スプライトシート画像 + CSS 座標を生成
-
列やパディングの設定が可能
-
HTTP リクエストを削減して Web パフォーマンスを向上させる
-
アイコンセットやゲームスプライトに最適
Common Use Cases
Web パフォーマンス
アイコンを単一のスプライトシートにまとめて HTTP リクエストを削減します。
ゲーム開発
個々のフレーム画像からアニメーション用スプライトシートを作成します。
アイコンセット
複数のアイコンを単一の効率的なスプライト画像にまとめます。
CSS スプライト
最適化されたスプライトシートと使用可能な CSS コードを生成します。
Technical Guide
画像はグリッド状に配置され、列数を設定できます。行数はceil(画像数/列)として計算されます。キャンバスの寸法は、最大幅ごとの列と合計行高さプラスパディングから算出されます。各画像は計算されたグリッド位置に描画されます。CSS座標は、それぞれのスプライトに対する負の背景位置値として生成されます。
Tips & Best Practices
-
1クリーンなグリッドを作るために、画像サイズを一貫してください
-
2パディングは 1-2px に設定して空間の浪費を最小限に抑えてください
-
3ファイル名を記述的に命名して CSS クラス名を改善します
-
4ゲームエンジンの互換性を持たせるために、2 の累乗を使ってください
Related Tools
Frequently Asked Questions
Q どのような画像サイズが最適ですか?
Q CSS が生成されますか?
Q 何枚の画像を組み合わせることができますか?
Q Retina ディスプレイについてはどうですか?
Q ゲームスプライト用に使用できますか?
About This Tool
イメージスプライトシート is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.