解説
画像データURIスキームに変換する（Inline Data Helpers）。指定された画像をデータURIスキームに変換し、普遍的にCSS内に保存する。
この関数が有効なのは、画像の変更頻度は低く、小さなものに限る。
メリットは、リクエスト数が減り、高速化される。
サーバからの送出時にgzip圧縮するのであれば、サイズはバイナリとほぼ変わらないサイズになる。
更新日：2017年3月26日
使用方法
使用方法
@include convert_inline_image( '/images/logo.gif' );
変換結果
background-image: url(data:image/gif;base64,R0lGODlhDAANANUAAPv7+/r6+vn5+ff39/b29vX19fPz8/Dw8O/v7+7u7u3t7ezs7Onp6ejo6Ofn5+bm5uTk5OPj4+Hh4eDg4N/f397e3tzc3Nvb29ra2tnZ2dbW1tXV1dPT09LS0tHR0c3NzcjIyMfHx8bGxsXFxby8vLe3t7W1tbOzs62traurq6mpqaioqKenp6ampqWlpaOjo6KioqGhoaCgoJ+fn5qampmZmf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUADYALAAAAAAMAA0AAAZxQJtwyGYrVaLEQswGYWAOAygxWELxaFwCVUWi/bRyZaJM5nUezjInkcjHi8U2rVNhmJY++QZDg0NBgTExEPhxJ+NCogDY6PjiMqGisLCJeYDTIaNikmCgOhAwgnKUICKCsdBgYdMSgCRBgogSgZQ0EAOw==);
パラメタ
- $url
- 画像URI
戻り値
なし。
コード
Calc代用関数
/*----------------------------------------------------------------------------------------------------------
画像データURIスキーム変換関数
説明：
画像データURIスキームに変換する（Inline Data Helpers）。
指定された画像をデータURIスキームに変換し、普遍的にCSS内に保存する。
この関数が有効なのは、画像の変更頻度は低く、小さなものに限る。
注意事項；
この関数の性格上、画像が変更された場合には、再コンパイルが必要となる。
引数：
画像URL
参照：
----------------------------------------------------------------------------------------------------------*/
@mixin convert_inline_image( $url )
{
background-image: inline-image( $url );
}
必須要素
情報
- Compassを用いること。
注意事項
- この関数の性格上、画像が変更された場合には、再コンパイルが必要となる。
更新履歴
- 2017/03/13 … 浅野 利博
- 新規作成