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


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

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

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

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

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

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

data URI Schemeって?

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

data URI Schemeのメリット

  • ・外部ファイルを読み込まないので、HTMLリクエストが少ない
  • ・HTML、CSSと同時に読み込まれるので表示が早い
  • ・SVGやWeb Fontsファイルなども埋め込める

data URI Schemeのデメリット

  • ・ファイルサイズが1.3倍に
  • ・ブラウザによっては、ファイルサイズの制限や表示されない場合がある
  • ・画像単位のキャッシュがきかない
  • ・編集が多い画像には不向き

data URI Scheme(base64)への変換ツール

  • ・Photoshop + Enigma64
  • ・Sublime Text2 + Image2Base64
  • ・Sass + Compass
    	.datauri {
    		background-image:inline-image("img/image.png");
    		width:100px;
    		height:100px;
    	}



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

対応ブラウザ

  • Firefox2+(100KBまで)
  • Safari
  • Chrome
  • Opere7.2+(4100Bまで)
  • IE8(32KBまで)

data URI Schemeの使いどころはあるの?

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

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

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

まとめ

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

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

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


The following two tabs change content below.
やす

やす

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

コメントは受け付けていません。