HTML内への画像ファイルの埋め込み ～ TiddlyWiki に画像を内蔵する。
この記事は最初の投稿日から19年経過しています。内容が古い可能性があります。
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 限定ですが、おもしろい仕掛けです。
もちろんこんなことは、アイコンファイルというサイズの小さな画像だからできることなのですが。