画像をCompass(Sass)でData URIスキーム化してHTTPリクエストを削減する

そもそも「Data URI」って何？って話ですが、例えば下記の画像。

実はスマホでGmailを表示した際に使われているアイコン画像なのですが、画像のリンクを開いたURLを見てください。外部に存在する画像を参照しているのではなく、HTMLに埋め込まれたコードそのもので画像が生成されています。

外部ファイルを参照しているわけではないので「画像を読み込む」というHTTPリクエストが無くなります。

HTTPリクエストが無くなることが画像のDataURI化のメリットです。
デメリットとして3割ほどサイズが増えるので、小さなアイコンなどには向いていますが写真などには向いていません。

Compass(Sass)では下記の記述になります。

.image {
    background-image: inline-image("../img/example.png");
}

下記のようにCSS出力されます。

.image {
    background-image: url('data:image/png;base64,iVBORw0～～');
}

実際に使う時は下記のようにすると、さらに画像のサイズも自動取得してくれて最高です。

.image {
    @include inline-block;
    background-image: inline-image("../img/example.png");
    width: image-width("../img/example.png");
    height: image-height("../img/example.png");
    background-position: left top;
    background-repeat: none;
}

変換元の画像パスさえ変えれば上記の記述でどのような画像でもDataURI化して利用できます。