HTMLファイルは、1ファイルにまとめることができれば、管理や配信がしやすくなるため、便利だと思いませんか？
画像データを Base64 エンコードして HTML ファイルに埋め込むことで、HTML ファイルを 1 ファイルにまとめることができます。
このプログでは、その方法を説明します。
HTMLの書式
HTMLで画像を表示する場合は、以下のように記述します。
<img src="画像のファイル名" />PNG画像を、埋め込む時は、以下のように記述します。
「xxxxx…」の部分は、Base64化されたデータの文字列（Data URI）となります。
以下のツールを使用することで、画像をData URI形式のデータに変換する事ができます。
<img src="data:image/png;base64,xxxxx..." />各画像ファイルは、以下のように記述します。
- GIF画像 ：「 image/gif 」
- PNG画像 ：「 image/png 」
- JPEG画像 ：「 image/jpeg 」
画像をData URIに変換するWebツール
以下のWebツールを使用する事で、画像をData URIに変換することができます。
画像をHTMLに直接埋め込み！Image2dataURI 変換ツール
SVG, JPEG, GIF, PNG画像を, HTMLやCSSに直接埋め込んで表示できる Data URI に変換するツールです。ブラウザ上で動作します。無料ブログなどで, SVG画像をアップロードできない場合に, その代替手段として使え...
www.cottpic.com
Windowsのコマンドプロンプトで、画像をData URIに変換する
Windowsにはデフォルトでcertutilという便利ツールがあります。このツールを使用することで画像ファイルをData URI (Base64の文字列)に変換できます。その逆も可能です。
encode
Data URI (Base64の文字列)への変換
certutil -f -encode "画像ファイル" "出力ファイル"decode
Data URI (Base64の文字列)から画像ファイルに戻す
certutil -f -decode "入力ファイル" "画像ファイル"参考URL
以下のWebページも参考にしてください。
