tips Data URI利用時の画像差し替えは、CompassのInline Data Helpersが便利

2012年07月19日 16:26 去る6月30日（土）に開催されたCSS Nite LP, Disk 23「表示速度最適化」でもネタとして挙げられたData URI。HTTP Requestの本数を減らすための効果的な手法として、CSS Spritesと対比されることも多いですよね。 Data URIを利用する際、画像を修正した場合は改めて画像ファイルをエンコードしてbackground-imageプロパティなどへ突っ込むひと手間が必要になりますが、CompassのInline Data Helpersを使えばこのひと手間を省けますね！ （Sass/Compassやってれば…という前提ですが…） 例えば、style.scssファイルへ .sample { background-image: inline-image('pict.png'); } って書いてコンパイルすると、style.c