【コードスニペット】Base64エンコードされた1x1pxの透過GIFが便利

スポンサーリンク

どうも、イソップです。

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属性を指定することで、自由にサイズ調整が可能です。

【参考記事】Base64 Encode of 1x1px Transparent GIF | CSS-Tricks

スポンサーリンク