m4 で画像の data-uri を埋め込む

今どき m4 かと思わなくもないけど、コマンドラインツールがあればだいたい入ってるので重宝する。

埋め込みたい画像のパスを DATA_URI マクロで囲む。 相対パスだと m4 の実行時のカレントディレクトリを見るので (たぶん) そこだけ注意

<img src="DATA_URI(image/image.png)">

画像ファイルの mime-type と base64 を引数から得て置換する m4 のマクロを (とりあえずコマンドラインにて) 定義して、実行する。

繰り返し使うようなら make や別途マクロ定義ファイルにまとめるとよいと思う。

$ m4 -DMIME='esyscmd(file -b --mime-type $1 | tr -d "\n")' \
     -DBASE64='esyscmd(base64 $1 | tr -d "\n")' \
     -DDATA_URI='data:MIME($1);base64,BASE64($1)' \
      hoge.m4.html > hoge.html