どうも、イソップです。
spacer.gifってご存知ですか？
CSSが普及する前、まだHTMLコーディングがテーブルレイアウトだった時代に重宝された、幅と高さが1pxの透過GIFのことを言います。
現在でも利用する機会はそれほど多くはないですが、
要素の上に透過GIF重ねてクリックを無効にしたり、
ブランク画像として使うこともあったりします。
この透過GIFを毎回用意するのは面倒です。
細かいことを言うと、画像1つ分のリクエストも発生します。
そこで、画像ファイルではなくBase64エンコードされたスニペットを紹介します。
透過GIFのコードスニペット
次のコードスニペットを使用します。
1×1の透過画像
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
1×1の黒い画像
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
width属性やheight属性を指定することで、自由にサイズ調整が可能です。