にしし ふぁくとりー(西村文宏 個人サイト)

CSS埋め込み用画像のBase64エンコードツール

2015/08/10 更新

任意の画像ファイルを、Base64でエンコードします。最大3ファイルまで同時にエンコードできます。 CSSソース内に画像を埋め込む目的で活用しやすいよう、エンコード結果はCSSの「background-image」プロパティにそのまま記述できる形で出力します。 CSSソース内に画像を埋め込みたい場合にご活用下さい。

Base64でエンコードしたい画像ファイルを送信

以下の入力欄に、Base64でエンコードしたい画像ファイル名を入力して下さい。最大3ファイルまで一括エンコード可能です。
入力後に「上記のファイルをBase64でエンコード」ボタンを押すと、入力された画像がBase64でエンコードされ、その結果が表示されます。その結果文字列をCSSソースに記述すれば、画像をCSSソースに埋め込むことができます。
※エンコードできる画像のファイルサイズは、最大100KBです。(サイズの大きな画像はそもそもCSSに埋め込まない方が望ましいです。)

※入力するにはJavaScriptの実行環境が必須です。

画像ファイルをBase64でエンコードすることで、画像をCSSソース中に埋め込める仕組みの解説

◆Base64を使って画像(バイナリ)データをテキストデータに変換する

Base64でエンコードすることで、バイナリデータをテキストデータで表現できます。その結果、画像のようなバイナリファイルでも、CSSのようなテキストファイル中に記述することができます。

◆CSSのbackground-imageプロパティの値に、Base64でエンコードされたデータを記述して表示

CSSのbackground-imageプロパティは、背景に画像を表示させるためのプロパティです。一般的には値として画像ファイル名を指定しますが、ここに直接「Base64でエンコードされた画像データ」を記述することもできます。 つまり、CSSソース中に画像そのものを埋め込めるわけです。

◆サイズの小さい画像をたくさん表示するなら、CSSソース内に埋め込むのも効果的

サイズの小さい画像をたくさん読み込もうとすると、ウェブサーバとの通信回数も多くなってしまって、読み込みに掛かる時間が長くなってしまいます。 CSSソース内に画像を埋め込んでおけば、読み込むファイルはCSSファイル1つで済むため、余計な通信量(回数)を減らせます。
※Base64でエンコードした結果のデータサイズは、元のファイルサイズの1.3倍くらいに大きくなってしまいますから、あくまでも「サイズの小さな画像」に限定した方法です。