解説

画像データ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 … 浅野 利博
新規作成

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.