バッチ CSSスプライト ジェネレーター
複数のアイコンや画像を単一ファイルに結合してHTTPリクエストを削減し、ウェブサイトの速度を向上。最適なCSSコードを自動生成。
スプライト生成のためにここにアイコンをドロップ
PNG、JPG、WebP、AVIFに対応。複数の画像を1つのCSSスプライトシートに結合。
例で試す
読み込み済みギャラリー
Sprite Studio
スプライトシートプレビュー
個別アイコン
| アイコン | クラス名 | 位置 | サイズ | アクション |
|---|
スプライトオプション
一括適用
変更時に自動再生成
プロフェッショナル CSSスプライト生成
複数の小さな画像を単一のスプライトシートに結合してウェブアセットを最適化。遅延を減らし、帯域幅を節約し、CSSワークフローを簡素化します。
サイト速度向上
HTTPリクエストが少ないほどページ読み込みが速くなります。50個のアイコンを1つのスプライトシートに結合することで、サーバーへの往復通信を49回削減できます。
自動生成CSS
もう手動でピクセルを数える必要はありません。当ツールはスプライトシート内の各アイコンの背景位置とサイズを自動計算します。
スマートレイアウト
垂直、水平、または最適化されたグリッドレイアウトを選択します。パディングを調整して、スケーリング時のアイコン間の「滲み」を防止します。
CSSスプライトシートの作成方法
アイコンをアップロード
結合したい小さな画像やアイコンをドラッグ＆ドロップ。PNG/JPG/WebP/AVIF形式に対応。
スプライト設定
レイアウトスタイルを選択し、余白を調整し、CSSクラス接頭辞を設定します。プレビューは即座に更新されます。
スプライトとCSSをエクスポート
最終スプライトシートと対応するCSSコードをZIPファイルでダウンロード。プロジェクトにコピー＆ペーストするだけ
よくある質問
なぜCSSスプライトを使用すべきですか？
CSSスプライトは古典的なパフォーマンス技術です。HTTPリクエスト数を削減し、特に低速な接続環境やアイコン・UI要素などの小さなアセットが多いサイトで効果的です。
どのレイアウトを選ぶべきですか？
縦横レイアウトはデバッグが最も容易。グリッドレイアウトは最終画像面積とファイルサイズを最小化するのに最適。
高DPI（Retina）スクリーンについてはどうですか？
ダブルサイズのアイコンでスプライトシートを生成し、CSSの「background-size」を使用して高DPIディスプレイでシャープに表示されるように縮小できます。