画像スプライトシートジェネレーター
多くの小さい画像（アイコン、UI 状態、キャラクターフレーム）をダウンロード可能な 1 つの PNG に結合し、それぞれを `background-position` で配置する CSS ブロックを発行する。アイコンフォント、SVG スプライト、または実際のスプライトシートパイプラインが選択肢でないときに HTTP リクエストを削減する。レイアウトは水平ストリップ、垂直ストリップ、または固定列グリッド；シートは各行または列の最大アイテムに合うようにサイズ調整される。ファイルは canvas を介して完全にクライアント側で処理される — アイコンはブラウザを離れない。
—
使い方
- 画像をドロップまたは選択する。OS が引き渡す順序で表示される。
- レイアウトを選ぶ：水平 / 垂直ストリップが最もシンプル、グリッドはより密。にじみを避けるためパディングを設定。
- PNG をダウンロード、CSS をコピー、一緒に出荷する — CSS プレフィックスに入れたクラス名と一致させる。
よくある質問
- スプライトシート vs. SVG スプライト vs. アイコンフォント？
- PNG スプライトはソースが実際のラスター（ゲームアート、写真サムネイル）のときに依然として勝つ。UI アイコノグラフィーには SVG スプライト（`<symbol>` + `<use>`）を好む — スケールし、currentColor に応答する。アイコンフォントは今やほとんどレガシーフォールバック。
- 透明度はどうなる？
- 背景を透明に保つと、PNG はアルファで保存される（プレビューで見えるチェッカーボードは透明な領域を見えるようにするだけ）。白または黒を選ぶと、それらがシートに焼き込まれる。
関連ツール
画像デュオトーン効果
どんな画像にも2色デュオトーン効果を適用 — シャドウカラー·ハイライトカラー選択、ミッドポイント·コントラスト調整、結果ダウンロード。Spotify風カバーが2クリックで。
画像 0 0
画像ぼかし
Gaussian・ボックス・モーションぼかしをブラウザで適用。半径0-64px調整可、等価なCSS filter文字列も提供。
画像 0 0
CSS フィルタープレイグラウンド
blur・brightness・contrast・hue・sepia・invert など 9 種を視覚的に組み合わせ — CSS や Tailwind 任意値でコピー。
カラー 0 0
画像 → ASCII アート
画像を ASCII アートに変換 — 幅・文字セット・反転を調整、ブラウザ内処理。
画像 0 0
Lorem Picsum URL ビルダー
picsum.photos からプレースホルダ画像 URL を生成 — 寸法・グレースケール・ぼかし・安定画像用シード・特定画像 ID。
画像 0 0
画像ピクセル化
画像をドロップして任意のブロックサイズにピクセル化 — スクリーンショットの検閲やレトロアート用にブロック完璧な出力。
画像 0 0