CompassでデータURI スキーム

Sassの拡張機能であるCompassを利用するとCSS スプライトだけでなくデータURI スキームも簡単に作成できます。Compassすごい。

次のようにinline-image()で画象フォルダ内のbase64エンコードしたい画象を指定します。

.dataUriImage{
	background-image: inline-image("sprite/a.png");
	width:50px;
	height:50px;
}

そうするとCSS内に次のように画象がbase64エンコードされたデータURI スキームで出力されます。

.dataUriImage {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABV0RVh0Q3JlYXRpb24gVGltZQAxMi42LjEyDDx03gAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAAHRSURBVGiB7ZlRccMwEETXnf7XDCoIgWAIgWAIhmAIgSAIheAyCARBcBFsP5xOMm3sO0nnRJ3Rzugrp7t9sqRLHJDEfxdJvDzbhJUqSGmqIKWpgpSm1x1ydoqYcBl2Mm6IPQAqxmRZlKQ5SIAOhAAOVkWtQTroIQjAWxW2BpkQB0IArUVhSxCHeAgCGC2KW4J4pIHMFsWtQFqkQfyMPteAFciIPJCQa8AKJGDb6IBlC23FdDkGLEB6weCMZet5IW7KMWEBchYM+kvcQYgjlpsvSbkgncLcbfeehFifaiQX5EMwdv4V3wvxRGKDzAFxClP9nXnSoR9TzOSAeMHQWqM7CfNCiplUkBbyyp5W5jph3tqT3BTJpB9WA4A3IabF+jb5EuYPSDn4CU8kQF7V3NFFM0SC9A+AIJYbcVcQqQFaDrcXSPdACCLinMQe9kER8xmRzwF43/j8iOsNKUv5RByM9zV0523UJIrZWl5R9KhGuErqR0GTRAuiaYCqgnckdXpC0SC1IKOi2BiNsMgpck9SEi1IUBRzsQQ3mhT5N1/mkURDEk3TbMV1gpEZf7+yx8hBXogzNm6vPV6ZPkX1z9ASVUFKUwUpTRWkNFWQ0lRBStM3yXJlse89B2QAAAAASUVORK5CYII=');
  width: 50px;
  height: 50px; }

個人的には出現頻度が高い画象はCSSスプライトで、出現頻度は高くなくそれほどファイルサイズが大きくない画像はデータURI スキームでって使い分けが良いかなと思ってます（セッション数とファイルサイズとキャッシュの関係を考慮しながら）。

参考:Compass Inline Data Helpers

スポンサードリンク

«CompassでCSSスプライト | メイン | MacのCodeKitでCompassを使う»