CompassでデータURI スキーム

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,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNC

[persee]

やべー

[peroon]

これははやくなるかも　あ、でもキャッシュきかないか

[hukuchosan]

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

[karihei]

そんなに大きくない画像はbase64で直接CSSに埋め込んじゃえ☆をさくっと実現．

[kkeisuke]

出現頻度が高い画象はCSSスプライトで、出現頻度は高くなくそれほどファイルサイズが大きくない画像はデータURI スキーム