Blog

Published on

RSS

CotEditorで画像のbase64埋め込み

webサイトに画像を表示させるときに、HTMLやCSSで画像ファイルのパスを指定してを呼び出すのではなく、画像ファイルをテキスト形式にエンコードしてそれを直接ソースに記述するという方法があります。

たとえばCSSで画像を追加したいとき、普通は

h2::before { content:url(../images/file.png) }

のように、CSSファイルから挿入したい画像のファイルのパスを指定しますが、画像データをbase64という形式でテキスト化することにより以下のように書くことができます。

h2::before { content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALBJREFUeNpiZACCyorK/9LS0gzo4P379x/evn3rMGHihIsoEpMmTvr/588fDLx+/fr/3V3d7/Ny8/RhaplAxL9//xj+//+PgTk5ORmysrMEZGSkD+RkZ+sjafiLVcP3798Zdu7cySAtIyPAzMx8AKSWBdkGdODs7AyWA4Enjx8LENTAxsYGZzMyMjIQ1IAMYDYNUg2ijx4+ZOjp7sarARhKIEoc5HVxIOZnIA58AQgwABZHliIIeBqFAAAAAElFTkSuQmCC) }

これで、この場合は file.png という画像データをテキスト形式で記述したことになり、これ以上サーバに file.png のファイルを上げる必要もありません。

CSS/HTMLファイルに直接画像も記述してしまえばそこから"画像ファイルを呼び出す" というトラフィックがなくなるので、サーバ負荷の軽減・表示速度の向上に繋がる、というテクニックです。大きい画像はテキスト化するとえらいことになるので、リストのマーカー画像や繰り返しの背景素材のような小さな画像データに向いています。

まぁ、詳しくはその辺を丁寧に解説してるサイトを検索して読んでください(雑)

CotEditor
CotEditor

本題は、「それをCotEditorでやるマクロを書いたから配布するよ」っていう方です。CotEditorのスクリプトメニューから実行するとファイルを選択するダイアログが出るので、挿入したい画像ファイルを選ぶとカーソル位置にbase64にエンコードされた画像データが挿入されます。Terminalを触ったりオンラインプログラムに頼ることなく、CotEditorだけで作業が完結するので、画像のテキスト埋め込みが気軽にできるようになるのではないでしょうか。

[screen shot]
screen shot: ダイアログから選択した画像をbase64エンコード

当サイトのCotEditor用マクロ配布ページからダウンロードできるようにしました。

画像データのbase64化というのは実はSVGでラスター画像を扱う上で重要な要素で、このスクリプトもSVG Suite用に書いたものが元なのですが、多分SVGをCotEditorで書くより画像のCSSファイル埋め込みの方が需要があると思われるので、単発の選択画像をbase64にエンコードするだけの版を作成しました1。良ければお使いください。

  1. SVG Suiteに入っている版は画像の縦横のサイズも拾った上で<image>タグを生成します。

Comment

この記事へのコメント受付は終了しました。