読了: 約 6 分

前職の時には使用しなかったので詳しい事はあまり分かっていなかったのですが、
現在スマホのブラウザアプリをごりごり創っていて、data URI Schemeも結構使えるんじゃなかろうかという事で
簡単にメモ・おさらいしておきます。

目的

・HTTP Requestの回数削減によるスマートフォンでのページ高速化

使用されている方はもう分かっているかと思いますが、
CSS spriteとどっちがいいのかなという事で。

そもそもdata uriって何？URLなの？

正直そう僕も思っていました。
そうしたら、英語の記事でも、『URI,not URL』とそんな事が書かれていました。笑

そもそものuri schemeについて

これについては分かり易い記事があったので、こちらを参考にしてください。

メリット・デメリット

メリット

  • パフォーマンスが上がる
  • CSS spriteで大量発生するclassを少なく出来る

最大のメリットとしては、目的と同じで、PCではまだ多くの人に親しまれているIE8で使えなかったりでCSSをIE用に分けないと実戦で使いにくいのですが、スマートフォンだとあのandroidでもちゃんと見れるようで、更に処理速度もスマートフォンの方が劣るので、http requestの回数を抑える事が出来るのは最大のメリットだと思います。

base64エンコードしたものとそうでないものを比較したサイトがありましたので
そちらで比較した結果を確認していただければと思います。

2点目の方は、CSS spriteの結果1つベースの画像を読んで、それを別のクラスを持たせて、background-position指定するために
生じる1classが削減できるというものです。
正直、css spriteする場合、それだけで画像数を削減できるのでメリットは薄いのですが、一応。

参考：Data URIs make CSS sprites obsolete

デメリット

  • 保守性が損なわれる

以上の1点が良く言われていることでしょうか。
ただ、何度も同じ画像をCSSに記述する人がいるのでそこはOOCSSかsassとかのCSSプリプロセッサーで@extendした方が良いでしょう。

2点目は結構痛いかもしれませんね。まずクライアント・自社に関わらず案件で、修正が入らないもの、PDCAを回して改善する機会の少ないものにしないと画像数が多いと1つずつ作り直さないといけないので厄介かもしれません。

従来の基本的な使い方

ツール等を使って、画像とconvertします。
Image to data URI convertor
画像をBase64に変換するツール (data URI scheme)

下記のようなフォーマットで記述されます。

data:[“MIMEタイプ”][;base64],[“エンコードデータ”]

スマホではどんな感じで使われているのか

なんと愛しのsassのcompassの中に、data uri形式にしてくれる関数があるんですよ。
sassでcompassを使用されている方は試してみると良いかもしれません。

デメリットである保守性が損なわれるというコトも、これによって、
画像を変更するだけで良いのでsass + compassで使えますね。

style.scss

.test
{
    background-image: inline-image('test.png');
}

style.css

/* line 2, ../sass/style.scss */
.test {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExQUIwODg0NTc3NkNCRTg4OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBMDg4NjlFMEM5NjUxMUUxQjhCQUJGM0U4NkUxOEUzMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBMDg4NjlERkM5NjUxMUUxQjhCQUJGM0U4NkUxOEUzMyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDU4MDExNzQwNzIwNjgxMTk3QTU5ODUzOUFEQjgyMkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMUFCMDg4NDU3NzZDQkU4ODkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7xQFlrAAABzUlEQVR42mL8//8/AzYAEjUA0UxA4jxU8AMQJyKrANMAAcSIy4wGJFUQw5Aw3AwwByCA0NF7qEQ/EO9Hd1cCkk4YW4ARTRE6YGTCJojMAQggnP7ABWBu2A/1HgMLmqQgECtAw08AXacAkgkG6IFigMWrIA3vGfF5EUQwYRE8gCzARMhbAAFECL3HFWmEbIB5ZAMQB6IlBxB2IBTQCWjB5oCWrhzwaURW2IDGRzdYADnVMmBxKi7MgB7TDDgMgIH9OMQpjyZGNL4DkfrgiQUggEjOD6QA5AROtBeQNZ9H4i+A5jMYcMRnaAJaaL/HEzsENa/HYQhRms9D2e+xGEK05v84vIMcPgzz0RTdxxMGyIafR06+7/H4FZvYeaSyDJ4p9pOYmQxgeeEDmQntAqHM5AhNaIzkFGlEg4E3gBEtAwmQWh4ABBgzhdn9OhC/hMUIvYABjhxeQGuLHbBYTEridyDX4gQshs0nMlQocgA2ixOQ6kTk4s6ACIc4UNvi/3jUYXPIekK5pIECi0lxCEb7cT6JBmCrVfYTcAg2D8AdApMkNi7RDSElRLDZhRWQkr1IqYOoVhYjVzWM2NrmdKsMBrw2GnUAxfU5LZvnxAAAxt9GnjWsU2oAAAAASUVORK5CYII=');
}

対象ブラウザ

  • Firefox 2以上
  • Opera 7.2以上
  • Chrome (all versions)
  • Safari (all versions)
  • Internet Explorer 8+ – data URIs 32kb以下に必ずしなければなりません。

まとめ

個人的には、background-positionでのclassが増えたとしても、CSS spriteで画像は管理した方が良いかなと思いました。
sass+compassを使っているフォルダ内に画像を入れておけばcss spriteをしてくれる機能がありますし、
画像が増えたとき、変更してspriteするための工数があまりかからなくなってきました。

上記のデメリットでもあげましたが、PCサイトを作成する際には限定されるので、あまり
お勧めは出来ませんが、スマホという事に限定して今回は書いてきました。
ただ、http Requestの数を減らすのであれば、css spriteの方が良いような気がしています。

時と場合で使ってみても良いのではないでしょうか。