デザイン作成時に間隔調整等によく使われてた スペーサーgif(透過gif画像)『blank.gif』
今となっては滅多に使わないからData URI Scheme化すると「あれどこ行った？」とならず便利だよね、とメモ。
自分は画像カバーとして使用するので、画像サイズを色々揃えてみた。
1x1
基本となるスペーサー。大概はコレ。
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
1x2
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAC0lEQVQYV2NggAEAAAoAAa8LFzAAAAAASUVORK5CYII=">
2x3
用紙サイズの比率は『1:√2』らしいので、数値的にはこの辺あたりが近いが、縦が若干長くなる。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAADCAYAAAC56t6BAAAADklEQVQYV2NkgAJGDAYAAFEABE0QqOoAAAAASUVORK5CYII=">
3x4
見た目的な感じではこっちの方が比率近いように思うが、横が若干狭くなる。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAYAAABLLYUHAAAADklEQVQYV2NkQAKMxHEAALYABey255IAAAAASUVORK5CYII=">
DataURIの方が早くなるけど、沢山同じの使う場合には通信料が増えちゃうとかデメリットもあるから注意。
詳しくは『快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 編集長ブログ―安田英久』
コメント