ここから本文です

快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた

3/21(火) 11:06配信

Web担当者Forum

今日は、Webページを素早く表示するために、lazyloadやスプライトで使うblank.gif画像をdata URI化する手法に関して。モダンブラウザで表示に問題のない最短文字数とデコード処理にかかる時間を調査してみました。ちょっと技術的です。



blank.gifというと、古い人には「スペーサーかよ!」と思われるかもしれませんが、今でも画像のlazyloadに使ったり、スプライト画像のベースに使ったりと、意外と使うものです。

このblank.gifを「data URI化」するとページ表示が早くなるんじゃないかと重い、調査したりテストしたりしてみました。結論としては、次のようなものでした。


・モダンブラウザで正しく表示されるblank.gifのdata URIは最短74文字の次の表現: data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

・data URI化したblank.gifのデコード処理は1画像あたり45マイクロ秒~100マイクロ秒程度なので、よほど大量でなければdata URIのほうが高速

・おそらくほとんどの場合は、blank.gifを使うよりもdata URIを使うほうが高速に表示できる(ただし初回訪問のユーザーに対してのみ)



「data URIって何なの?」という方は、この記事の後半の解説を参照してください。data URIを使うときのメリットとデメリットもあわせて説明しています。

 

blank.gifのdata URI化、最も短い表現は?

1ピクセル×1ピクセルの透明画像をdata URI化するといっても、意外といろんなバリエーションがありました。最短は42文字、最長はPNG版の114文字でした。

また、data URIではありませんが画像のsrc属性に「//:0」や「file://null」などを指定するといった手法もありました。

それぞれ、各種ブラウザで正しく「1ピクセル四方の透明画像」として正しく表示するかを確認したところ、現行のモダンブラウザで正しく表示される最短data URIは74バイトでした。

1/3ページ

最終更新:3/21(火) 14:20
Web担当者Forum