2012 . 11 . 16

指定した画像をDataURIスキームに変換してくれるサイト『Duri.me』

『Duri.me』は指定した画像をDataURIスキームに変換してくれるサイト。

DataURIとは画像をbase64でエンコードしたデータそのもので、通常の画像のURLの代わりに使用することでHTMLやCSSに画像ファイル自体を直接埋め込むことができることを意味します。

使い方はページ上に画像を放り込んでアップロードするだけ。

目的に応じ3タイプのボタンをクリックして変換されたデータをクリップボードにコピーして利用できます。

「copy code as base64」がデータ本体、「copy code as image」は<img>タグのsrc属性にデータが挿入された状態、「copy code as CSS」はCSSプロパティのbackground-imageにデータがセットされた状態でそれぞれ出力されます。

以下は出力されたコードとそれを実際に貼り付けた例です。

<img width='200' height='200' title='' alt='' src='data:png;base64,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'>

さて、DataURIスキームを用いれば画像含んだ複数のファイル群からなるWebページも、画像自体をHTMLに埋め込んでしまうことで完全に一つのHTMLとして保存ができるほか、画像ファイルへのリクエストを押さえられるので、最近ではしばしばCSSのテクニックの一つとしても活用されています。

中にはCSSスプライトと併用して、ページで使う画像をすべてを繋げたものをDataURIに変換して使っているところもあるぐらいです。

ただしあまり大きな画像には注意が必要でデコードにかなりの時間がかかるため、いくらリクエスト量が抑えられてもこれでは本末転倒になりかねないので、そのあたりはよくよく検討する必要がありますが、比較的小さめなナビゲーションアイコンやらシェアアイコンなどにはこういったテクニックを用いると効果的かもしれません。