Chrome ブラウザだけで、画像の DataURI を簡単に取得する方法を紹介します。

1. 適当な画像を右クリックし 新しいタブで画像を開く を選択します。

   

2. 新しいタブで表示された画像をさらに右クリックし、 要素の検証 を選択します。

   

3. DevTools の Elements タブが表示されるので、画像のリンクをクリックします。

   

4. 表示されているBase64文字列を選択しコピーします。
   Command + A (Windows なら Control + A) で全選択してからコピーしましょう。
   ダブルクリックやトリプルクリックでも選択できますが、コピペミスの確率がぐっと上がるので、キーボードを使いましょう。

   

以上です。

手順が4つほど必要になりますが、サーバに画像をアップロードする必要がなく、file:///... な画像でも扱えるので、(数が少ない場合は)専用の変換ツールを使うよりも楽なのではないでしょうか。

取得したBase64文字列を利用するときは、画像フォーマットに応じて先頭に data:image... を追加します。

png	data:image/png;base64,
jpeg	data:image/jpeg;base64,

Base64 文字列を Markdown で使う

Markdown で GitHub/wiki, gist, はてなブログ に埋め込むには

![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgQAAA...) とします。

拡張機能を使うと1クリックで画像をBase64に変換できます

https://chrome.google.com/webstore/detail/copy-base64/obeffifkdkfbpodhaoelcjdljgiapjnl?hl=ja を入れると右クリック一発で出来ます。

(ε・◇・)з o O ( 「おやおや、これまでの説明は何だったんだ?」デース