快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久

今日は、Webページを素早く表示するために、lazyloadやスプライトで使うblank.gif画像をdata URI化する手法に関して。モダンブラウザで表示に問題のない最短文字数とデコード処理にかかる時間を調査してみました。ちょっと技術的です。 blank.gifというと、古い人には「スペーサーかよ！」と思われるかもしれませんが、今でも画像のlazyloadに使ったり、スプライト画像のベースに使ったりと、意外と使うものです。 このblank.gifを「data URI化」するとページ表示が早くなるんじゃないかと思い、調査したりテストしたりしてみました。結論としては、次のようなものでした。 モダンブラウザで正しく表示されるblank.gifのdata URIは最短74文字の次の表現：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA

[sutetuki]

“data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>” “data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==”

[asiamoth]

全ブラウザで正しく表示される──よりも、iframeでも使える`//:0`が手軽で良いと思う。「壊れた画像アイコン」が表示されるが、それはCSSで何とかする。