HTML内への画像ファイルの埋め込み ～ TiddlyWiki に画像を内蔵する。

favicon というものがあります。

FireFox の URL欄の左端に表示される画像です。

この画像、FireFoxではブックマークでも表示されるのですが、画像ファイルはどこに格納されているのだろうかと以前から思っていました。

FireFox のブックマークの実体である、bookmark.html をのぞいてみると、

<DT><A HREF="http://d.hatena.ne.jp/toshyon/" ADD_DATE=
～ 中略 ～
ICON="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAA
～ 中略 ～
CAAQAAgAEAAIABAACAAQAA//8AAA==" LAST_CHARSET="
～ 中略 ～
>はてなダイアリ</A>

という記述があります。

どうやら、画像ファイルが埋め込まれているようです。

それならばと、試しに TiddlyWiki に埋め込んでみました。

以下のように書きます。

[img[data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIA
AAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJmZmf+ZmZn/mZmZ/5mZmf+ZmZn/mZmZ/5mZmf
+ZmZn/mZmZ/5mZmf+ZmZn/mZmZ/5mZmf+ZmZn/AAAAAAAAAAD///////////////////////////////
//////////////////////////////////////mZmZ/wAAAAAAAAAA//////////////////////////
///////////////////////////////////////////5mZmf8AAAAAAAAAAP////////////////////
+1tbX/tbW1/7W1tf+1tbX/tbW1//////////////////////+ZmZn/AAAAAAAAAAD///////////////
//////tbW1/7W1tf///////////7W1tf+1tbX/////////////////mZmZ/wAAAAAAAAAA//////////
///////////7W1tf+1tbX/////////////////tbW1/7W1tf///////////5mZmf8AAAAAAAAAAP////
////////////////+1tbX/tbW1/////////////////7W1tf+1tbX///////////+ZmZn/AAAAAAAAAA
D/////////////////////tbW1/7W1tf////////////////+1tbX/tbW1////////////mZmZ/wAAAA
AAAAAA/////////////////////7W1tf+1tbX/////////////////tbW1/7W1tf///////////5mZmf
8AAAAAAAAAAP////////////////////+1tbX/tbW1////////////tbW1/7W1tf////////////////
+ZmZn/AAAAAAAAAAD/////////////////////tbW1/7W1tf+1tbX/tbW1/7W1tf////////////////
//////mZmZ/wAAAAAAAAAA//////////////////////////////////////////////////////////
///////////5mZmf8AAAAAAAAAAP////////////////////////////////////////////////////
////////////////+ZmZn/AAAAAAAAAAD///////////////////////////////////////////////
//////////////////////mZmZ/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8AAIABAACAAQAAgAEAAIABAACAAQAAgAEAAIABAA
CAAQAAgAEAAIABAACAAQAAgAEAAIABAACAAQAA//8AAA==][http://d.hatena.ne.jp/toshyon/]]

結果、このダイアリへのリンク付きアイコンが表示されました。

普通に HTML に書けば表示されるので、TiddlyWiki の画像を表示するための Wiki記法でも表示されるのですね。

ファイルを Base64エンコーディングできるツール(私が使ったのは TextShop)を使ってエンコードした文字列を得ることができれば、その他の画像フォーマットでも可能でした。

IE ではバッテンがでるだけなので FireFox 限定ですが、おもしろい仕掛けです。

もちろんこんなことは、アイコンファイルというサイズの小さな画像だからできることなのですが。