【CSS】スマートフォン向けWebサイトでdataURIが本領発揮する件

はじめに

画像をBase24とかでエンコードしてdataURIスキームで読み込む、ってことが最近のブラウザでは可能になった訳ですが、 仕事でスマートフォン向けのサイトを作っていた際に、画像の読み込み待ちが気になったのでちょうどいいと思い試してみたところ、 驚くほど早くなった(気がした)ので実際に計ってみました。

準備

読み込む画像はこれ↓

エンコードするとこんな感じ↓

data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAACAgICAgICAgICAwICAgMEAwICAwQFBAQEBAQFBgUFBQUFBQYGBwcIBwcGCQkKCgkJDAwMDAwMDAwMDAwMDAwMAQMDAwUEBQkGBgkNCwkLDQ8ODg4ODw8MDAwMDA8PDAwMDAwMDwwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAKAJoDAREAAhEBAxEB/8QAaQABAQEBAAAAAAAAAAAAAAAAAAMGCQEBAQEBAAAAAAAAAAAAAAAAAAIEBhAAAAMHBQEAAAAAAAAAAAAAAAMEwQKygzREdLHCc4Q1RREAAQMFAQEAAAAAAAAAAAAAAAGBAkFxMgMzwUP/2gAMAwEAAhEDEQA/AOtyK7xzGDtttLoc1qrZQRRrpUQTzi4hhJh87sbA+jej5v4D6NDNiCGcmE8IuFtpjltDVW6jbSyFj/Ud5C9HREOTKVPq6Aj1HuQzR4J8mQQ6upFFd45jBe2l0J1VsoIo10qIJ5xcQwkw+d2NgfRvR838B9GhmxBDOTCeEXC20xy2hqrdRtpZCx/qO8hejoiHJlKn1dAR6j3IZo8E+TIIdXUiiu8cxgvbS6E6q2UEUa6VEE84uIYSYfO7GwPo3o+b+A+jQzYghnJhPCLhbaY5bQ1Vuo20shphgNxmUV3jmMG/bS6GHVWygijXSognnFxDCTD53Y2B9G9HzfwH0aGbEEM5MJ4RcLbTHLaGqt1G2lkLH+o7yF6OiIcmUqfV0BHqPchmjwT5Mgh1dSKK7xzGC9tLoTqrZQRRrpUQTzi4hhJh87sbA+jej5v4D6NDNiCGcmE8IuFtpjltDVW6jbSyFj/Ud5C9HREOTKVPq6Aj1HuQzR4J8mQQ6upFFd45jBe2l0J1VsoIo10qIJ5xcQwkw+d2NgfRvR838B9GhmxBDOTCeEXC20xy2hqrdRtpZDTDAbj/2Q==

これらをそれぞれ幅320px、高さ1000pxのボックスの背景として指定し、リピートしてあげます。

通常通り背景画像を指定(data_uri_test.html)

</p>

<h1>test{</h1>

<pre><code>width: 100%;
height: 1000px;
background: url(&amp;quot;./iphone_sample/images/bg_page_category_1.jpg&amp;quot;) 0 0 repeat;
</code></pre>

<p>}

画像をBase64でエンコードし、dataURIスキームで読み込む(data_uri_test2.html)

</p>

<h1>test{</h1>

<pre><code>width: 100%;
height: 1000px;
background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABQAAD/7gAOQWRvYmUAZMAAAAAB/9sAhAACAgICAgICAgICAwICAgMEAwICAwQFBAQEBAQFBgUFBQUFBQYGBwcIBwcGCQkKCgkJDAwMDAwMDAwMDAwMDAwMAQMDAwUEBQkGBgkNCwkLDQ8ODg4ODw8MDAwMDA8PDAwMDAwMDwwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAKAJoDAREAAhEBAxEB/8QAaQABAQEBAAAAAAAAAAAAAAAAAAMGCQEBAQEBAAAAAAAAAAAAAAAAAAIEBhAAAAMHBQEAAAAAAAAAAAAAAAMEwQKygzREdLHCc4Q1RREAAQMFAQEAAAAAAAAAAAAAAAGBAkFxMgMzwUP/2gAMAwEAAhEDEQA/AOtyK7xzGDtttLoc1qrZQRRrpUQTzi4hhJh87sbA+jej5v4D6NDNiCGcmE8IuFtpjltDVW6jbSyFj/Ud5C9HREOTKVPq6Aj1HuQzR4J8mQQ6upFFd45jBe2l0J1VsoIo10qIJ5xcQwkw+d2NgfRvR838B9GhmxBDOTCeEXC20xy2hqrdRtpZCx/qO8hejoiHJlKn1dAR6j3IZo8E+TIIdXUiiu8cxgvbS6E6q2UEUa6VEE84uIYSYfO7GwPo3o+b+A+jQzYghnJhPCLhbaY5bQ1Vuo20shphgNxmUV3jmMG/bS6GHVWygijXSognnFxDCTD53Y2B9G9HzfwH0aGbEEM5MJ4RcLbTHLaGqt1G2lkLH+o7yF6OiIcmUqfV0BHqPchmjwT5Mgh1dSKK7xzGC9tLoTqrZQRRrpUQTzi4hhJh87sbA+jej5v4D6NDNiCGcmE8IuFtpjltDVW6jbSyFj/Ud5C9HREOTKVPq6Aj1HuQzR4J8mQQ6upFFd45jBe2l0J1VsoIo10qIJ5xcQwkw+d2NgfRvR838B9GhmxBDOTCeEXC20xy2hqrdRtpZDTDAbj/2Q==) 0 0 repeat;
</code></pre>

<p>}

計測自体はJSで簡単に、

var d = new Date();
window.onload = function(){
    var nd = new Date();
    console.log(nd - d);
}

こうしてあげることにします。

いざ測定

これを手持ちのiPhone3GS(満1歳)で読み込んで、実測！

	エンコードなし	エンコードあり
Wi-Fi	2292.7	33.5
3G	4232.2	32.3

(10回計測時の平均値。単位はms)

考察というよりは感想

Wi-Fi環境では70倍ほど、3G回線では100倍以上早くなってます。 テストに使ったのがDropboxだったので、色々アレかもしれませんが、 計測中も体感で早くなっているのがわかるほどでした。 あまりにも計測値に差があるのでビックリしましたが・・・。

いっそのこともう画像は全部dataURIで読み込めばいいんじゃないかと思えるほどだったわけですが、 いかんせんCSSファイルがとんでも無いことになってしまうのはちょっと残念です。 画像の指定部分のみ別のファイルで管理するなどして対策する必要がありそうな感じです。

あとは毎回エンコードしないといけないので、頻繁に変わるバナー等は大人しくベタ張りした方がよさげですね。 逆にシステム側で吐き出してるでかい画像なんかは、エンコードして持っておくと色々幸せになれそうな気がする、などなど。 使いどころをしっかり選べば十分実用に足るのではないでしょうか。

おわりに

せっかくなんで計測データを貼っておこうと思います。

Wi-Fi image	2161	2307	2123	2205	2410	2207	3086	2104	2121	2203	av:2292.7
Wi-Fi dataURI	53	25	32	27	32	32	32	26	32	44	av:33.5
3G image	3869	4433	4779	4306	6481	3635	4444	3280	3556	3539	av:4232.2
3G dataURI	25	27	33	36	33	33	44	33	33	26	av:32.3

テーブルで整形するのにZen-Codingが役に立ったのは言うまでもありません。