Creation
スプライトシート生成ツール
複数の画像をスプライトシートに結合し、開発者向けのCSS、JSON、SCSS出力を生成します。
Your files stay on your device - processed locally via WebAssembly, never uploaded
Drop sprites (PNG, JPEG, WebP)
Drop multiple files at once. Add more anytime.
Embed this tool on your website
Copy this code to add the スプライトシート生成ツール to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="スプライトシート生成ツール by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix スプライトシート生成ツール</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About スプライトシート生成ツール
Last updated: May 2026
OptiPix Sprite Sheet Generator は、複数の画像を 1 つの最適化されたスプライトシートに結合し、すぐに貼り付けられる CSS、JSON 座標、および SCSS 変数を提供します。レイアウトを選択してください: 水平ストリップ、垂直ストリップ、グリッド (カスタム列数)、またはパック (最小限の無駄スペースのためにビンパック)。エッジの漏れを防ぐためにスプライト間のパディングを設定します。出力は、単一の PNG スプライトシートと、各スプライト用の生成された CSS ('.sprite-icon-home { background-position: -0px -0px; … }')、JSON 座標マップ、および SCSS 変数です。Retina @1x および @2x スケーリングをサポートします。各スプライトはソースファイル名から名前が付けられます。すべてローカルで実行されます - 画像はデバイスから離れることはありません。ゲーム開発者、CSS スプライトを使用する Web 開発者、および小さなアイコンを単一のネットワーク要求にバンドルしたいすべての人向けに構築されています。
How It Works
各入力画像はメモリにロードされ、選択されたレイアウトアルゴリズム (ストリップ、グリッド、またはシェルフビンパック) がスプライトごとの (x, y, w, h) 座標を計算し、スプライトシートがキャンバスにレンダリングされ、CSS / JSON / SCSS が同じ座標マップから生成されます。
Use Cases
- •UI アイコンを単一の PNG + CSS スプライトシートにバンドルする
- •Phaser または Pixi の 2D ゲーム用のスプライトアトラスを作成する
- •ソーシャルメディアアイコンを 1 つの CSS スプライトに結合してサイトを高速化する
- •キャラクターアニメーションフレームを水平ストリップにパックする
- •ソース画像から Retina 対応の @2x スプライトシートをビルドする
You Might Also Like
If you find スプライトシート生成ツール useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools