Jump to the content

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

Other

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

    どうも、イソップです。

    spacer.gifってご存知ですか?
    CSSが普及する前、まだHTMLコーディングがテーブルレイアウトだった時代に重宝された、幅と高さが1pxの透過GIFのことを言います。

    現在でも利用する機会はそれほど多くはないですが、 要素の上に透過GIF重ねてクリックを無効にしたり、 ブランク画像として使うこともあったりします。

    この透過GIFを毎回用意するのは面倒です。 細かいことを言うと、画像1つ分のリクエストも発生します。

    そこで、画像ファイルではなくBase64エンコードされたスニペットを紹介します。

    透過GIFのコードスニペット

    次のコードスニペットを使用します。

    1x1の透過画像

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    

    1x1の黒い画像

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
    

    width属性やheight属性を指定することで、自由にサイズ調整が可能です。

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

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×