画像 → CSS

CSS 背景とは？

CSS では、background-image プロパティを使って任意の HTML 要素のコンテンツの背後に画像を表示できます。background-size、background-position、background-repeat などの関連プロパティと組み合わせることで、画像が要素のボックス内でどのように埋められ、覆われ、タイル表示され、配置されるかを正確に制御できます。CSS 背景は、マークアップに追加の <img> タグを挿入せずに、要素に装飾的なグラフィック、ヒーロー写真、テクスチャオーバーレイ、グラデーション、パターンを追加する標準的な方法です。

背景は background ショートハンドまたはそのロングハンドプロパティを通じてブロック要素やインラインブロック要素に適用されます。画像は HTML ではなく CSS に存在するため、スクリーンリーダーはデフォルトで読み上げません。これにより、コンテンツとして読み上げるべきでない純粋な装飾グラフィックに最適です。意味のあるコンテンツ画像には、説明的な alt テキストを伴う <img> タグが引き続き正しい選択です。

画像を CSS に埋め込む理由

画像を Data URL として CSS ルールに直接埋め込むことで、ブラウザがアセットを取得するために個別の HTTP リクエストを発行する必要がなくなります。画像は Base64 文字列としてインラインエンコードされ、background-image プロパティの url() 関数に貼り付けられます。この手法は、アイコン、箇条書き、テクスチャ、装飾的な UI 要素などの小さなグラフィックに特に効果的で、追加リクエストのオーバーヘッドがエンコードのサイズペナルティを上回る可能性があります。

パフォーマンス以外にも、画像を CSS に埋め込むことでスタイルシートが自己完結型になりポータブルになります。単一の CSS ファイルがすべての背景グラフィックを保持でき、デプロイがシンプルになり、ファイルをプロジェクト間で共有しやすくなり、スタイルシートが新しい場所に移動したりコンポーネントライブラリにバンドルされたりしてもアセットが欠落しません。

CSS Data URL

Data URL はバイナリデータをテキストとしてインライン埋め込みできる URI スキームです。CSS の background-image の url() 関数内に Data URL を配置すると、ブラウザは埋め込まれたペイロードをデコードし、別のファイルから読み込んだ場合と全く同じように画像をレンダリングします。構文は background-image: url("data:image/png;base64,iVBORw0KGgo..."); のようになります。

Base64 エンコーディングはバイナリデータを約 33% 膨張させるため、埋め込み画像はソースファイルより大きくなります。そのため、埋め込みは数 KB までのグラフィックに推奨されます。大きな写真は通常、ブラウザが効率的にキャッシュしオンデマンドで遅延読み込みできるよう、別の画像ファイルとして提供すべきです。

画像 → CSS 変換を使う場面

画像を CSS 背景コードに変換すると便利な実用的なシナリオがいくつかあります：

• 装飾的な UI グラフィック。箇条書き、ディバイダー、バッジ、テクスチャ、小さな背景パターンはインライン CSS 埋め込みに最適です。
• メールや署名テンプレート。一部のメールクライアントはデフォルトで外部画像をブロックします。背景を CSS に埋め込むことでレンダリングを保証できます。
• コンポーネントライブラリ。グラフィックを埋め込んだ自己完結型の CSS ファイルはプロジェクト間で配布・再利用しやすいです。
• 単一ファイルのプロトタイプ。すべてのスタイルとグラフィックを含む単一の .html ファイルとして共有する必要がある場合、インライン CSS Data URL は非常に役立ちます。
• ヒーローやバナーの背景。小さなヒーローグラフィックはインライン化して、ネットワーク往復を待たずに最初のペイントでレンダリングできます。
• ファーストビューのクリティカルアセット。重要な背景をインライン化することで、初期ページ読み込み中のレンダリングをブロックする画像リクエストを排除できます。

大きな写真、ページ全体の背景画像、CDN キャッシュや遅延読み込みの恩恵を受けるアセットの埋め込みは避け、それらは URL で参照する別ファイルとして保持してください。

画像を CSS に変換する方法

このツールを使って画像を CSS 背景コードに変換するのは数秒で完了し、すべてブラウザ内で行われます。アップロード、登録、インストールは不要です。ツールは画像をデコードし、キャンバスに描画し、PNG、JPEG、WebP の Data URL として再エンコードし、完全な CSS クラス定義内に包みます。次の 4 つの手順に従ってください：

1. 画像をアップロード。アップロードエリアをクリックするか、.jpg、.png、.webp、.gif、.bmp、.svg ファイルをドラッグ＆ドロップします。画像はローカルでデコードされ、プレビューとして表示されます。
2. 出力オプションを選択。埋め込み形式（PNG は透過、JPEG はより小さな写真、WebP はモダンな高効率）を選び、hero-bg や card-pattern などの CSS クラス名を入力します。
3. CSS を生成。「CSSを生成」ボタンをクリックします。Data URL を埋め込んだ完全な CSS クラスが結果ボックスに表示されます。
4. CSS をコピー。「コピー」をクリックして CSS ルールをクリップボードにコピーし、スタイルシートに貼り付けます。

すべてのステップは JavaScript を使用してブラウザ内でローカルに実行されるため、画像がサーバーにアップロードされることはありません。これにより変換は完全にプライベートで高速、機密性の高い画像にも適しています。