Data URI Schemeで画像を埋め込み、サイトを高速化しよう！

画像読み込みを高速化するにあたり、HTTPリクエストを減らすためのテクニックの一つに、CSS Sprite等がよくつかわれていますね。

CSS Spriteについてはこことかでわかりやすい説明がされています。

とても便利なテクニックなのですが、Retinaディスプレイ対応など倍のサイズで作りまくっていると、いつの間にか肥大化していることもあります。

PCサイトの場合はそれでもいいのですが、スマホサイトの場合はiOSにおけるリソース制限などがあるので、大きすぎる画像は一部端末では表示されないなんてことになりえます。

これ、PCブラウザやエミュレーターでのチェックでは再現されないため、実機確認で切ないことになるのでご注意ください。

画像読み込み高速化の手段として、data URI Schemeが使いどころによってはよさそうなのでご紹介します。

data URI Schemeって？

画像などのファイルを「base64」にエンコードして、内部コードに埋め込む手法。インラインで画像を埋め込むため、HTTPリクエストは１つで済みます。

・Sass + Compass

	.datauri {
		background-image:inline-image("img/image.png");
		width:100px;
		height:100px;
	}

Sass + Compassだと、「URL」を「inline-image」にするだけなので、作成も管理も簡単になりおすすめです。

サイトを開いた際に表示されるローディングのGIFや、ソーシャルアイコンのボタンなどの単純で小さい画像などは、ファイルサイズが増える事よりもHTTPリクエストの回数を減らした方がメリットが大きいかと思います。

小さい画像とはいえ、あまりに多用しすぎると、ソースの視認性が悪くなる上に重くなってしまうのでバランスを考えて利用しましょう。

また、企業サイトなど多様なブラウザでの利用が想定されるサイトにも向いてないかと思います。逆に、スマホ専用サイトなどに利用すると、回線が弱くても表示がスムーズになる場面もあるでしょう。

決して万能な手法ではないですが、適材適所で使い分け、サイトパフォーマンスの向上を図りましょう。

ユーザーにとって、より使いやすいサイトにしていくために。

それでは、皆様よいお年を

夏は薪を拾ったり割ったりし、冬はそれを燃やして暖をとる生活に憧れて、北海道にやってきました。好きな生き物は酵母菌、中でもサッカロミセス･セレビシエが好みです。