画像ファイルをBase64でエンコードすることで、画像をCSSソース中に埋め込める仕組みの解説
◆Base64を使って画像(バイナリ)データをテキストデータに変換する
Base64でエンコードすることで、バイナリデータをテキストデータで表現できます。その結果、画像のようなバイナリファイルでも、CSSのようなテキストファイル中に記述することができます。
◆CSSのbackground-imageプロパティの値に、Base64でエンコードされたデータを記述して表示
CSSのbackground-imageプロパティは、背景に画像を表示させるためのプロパティです。一般的には値として画像ファイル名を指定しますが、ここに直接「Base64でエンコードされた画像データ」を記述することもできます。
つまり、CSSソース中に画像そのものを埋め込めるわけです。
◆サイズの小さい画像をたくさん表示するなら、CSSソース内に埋め込むのも効果的
サイズの小さい画像をたくさん読み込もうとすると、ウェブサーバとの通信回数も多くなってしまって、読み込みに掛かる時間が長くなってしまいます。
CSSソース内に画像を埋め込んでおけば、読み込むファイルはCSSファイル1つで済むため、余計な通信量(回数)を減らせます。
※Base64でエンコードした結果のデータサイズは、元のファイルサイズの1.3倍くらいに大きくなってしまいますから、あくまでも「サイズの小さな画像」に限定した方法です。
