htmlファイル自体に画像を埋め込む方法【base64】

通常

「base64」を使って直接埋め込む方法

みたいな書き方で直接埋め込めます。

image/jpegの部分は、
GIF画像であれば、「 image/gif 」
PNG画像であれば、「 image/png 」
JPEG画像であれば、「 image/jpeg 」と記述します。

http://dl.dropbox.com/u/32472093/blog/IMG_0845.JPG
上記の画像を埋め込んだ.htmlをサンプルとして掲示します。
サンプル
「名前をつけて保存」してもらったらいいと思う。ソースを見れば一目瞭然です。

画像をbase64に画像をエンコードするのに
MBASE64.exe
これを使いました。二次配布していいものか・・・。例の如く警告されたら消そう。他にも画像をうpして変換したコードを出力してくれるサイトなんかが結構あります。

普通に同階層に画像置いて呼び出したほうがシンプルだし、保守性いいやん!って思うかもしれません。
手引書の.htmlのサブディレクトリとして画像を入れるのも、すっきりしないし、同階層に入れるとなおのことすっきりしない。てか普通にexcelとかで作成しろよ!って感じですが、最近のexcelは無駄に起動が遅いので棄却しました。というか単純に私はexcelよりhtmlのが扱い慣れており、判然たる手引書が作れるであろうと踏みました。
メリットとして、

  • マルチプラットフォーム対応の手引書となる(実際にはIE6とかは無理っぽい?)
  • Excelとかシェアソフトが不要、ブラウザあれば見れる
  • なんとなくカッコいい、エポックな人と思ってもらえる可能性がある
  • ファイルが軽い(開くのが。)
  • 見易い(個人的に。)

ちなみにメールで画像を添付する際にも、画像を一旦base64形式にエンコードしてから文字として相手に送信する。相手側は受け取った後、デコードして画像として認識します。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク