はじめに
通常CSSファイルと，画像ファイル（png，jpg，gif等)は別々に用意したものを参照します。これらは個々の通信が発生するため画面に表示する画像の表示が遅いと感じることが少なくありません。
画像ファイルの読み込み回数を減らすことで性能の向上を狙うのであればCSSスプライトを採用する手もありますが，以下をすべて満たすような場合は本ページを参考にしていただいた方がいいかもしれません。
- 画面の背景に画像ファイルを使ってる。
- 画面遷移前と後が同じレイアウトである。
- 画面遷移時に一瞬画面が消えるのを避けたい。
業務アプリケーションの画面でよくあるパターンだと思います。
方法
background-imageプロパティのurl関数の引数を data URL scheme で指定します。
data URL scheme は次のように指定します。
data:[<mediatype>][;base64],<data>
- <mediatype>はメディアタイプを指定。pngファイルならimage/png，jpgファイルならimage/jpg，gifファイルならimage/gifとする。
- <data>はBase64符号化したテキストデータ。
バイナリーファイルをBase64符号化する方法
ターミナルを起動して，base64コマンドを実行します。
$ base64 myfile.png
Cygwinから実行する場合は -w 0 オプションを指定してください。
$ base64 -w 0 myfile.png
例
.myselector {
background-image: url("data:image/png;base64,SGVsbG8gV29ybGQuCg==");
}
メリット
- CSSファイルの読み込みと同時に画像が読み込まれるイメージで使用できるため，描画のちらつきを押さえることができる。
デメリット
- Base64符号化したデータのサイズがバイナリーに比べて約33%増加する。
- 画像に変更を加える度にBase64符号化が必要になるため，保守運用性が低下する。
注意
- 保守運用性が低下するためまずは業務アプリケーションを提供して，エンドユーザーに使ってもらってどう感じるかによって data URL scheme の適用の検討をしていただくことがオススメ。
- 読み込むCSSファイルを指定するlinkタグはheadタグ内に配置すること。
- CSSスプライトを併用するメリットはない。