Mastodon/サーバ詳細説明欄に URL を使わずに画像を埋め込む の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Mastodon/サーバ詳細説明欄に URL を使わずに画像を埋め込む へ行く。

#author("2023-06-05T14:16:19+00:00","default:mogamin","mogamin")
* サーバ詳細説明欄に URL を使わずに画像を埋め込む [#xbd5bb3e]
Mastodon のサーバ詳細説明欄は Markdown が使えるので、[[Markdown 記法:https://daringfireball.net/projects/markdown/syntax]]にしたがい、画像の URL を指定することで画像を埋め込める。

が、サイズの小さい画像であれば、画像を Base64 に変換した文字列を [[Data URI scheme:https://ja.wikipedia.org/wiki/Data_URI_scheme]] として URL のかわりに指定することでも埋め込める。こうすれば、画像のために別途サーバを用意しなくていいし、画像をロードするための HTTP リクエストによるトラヒックも減らせる。

いま、埋め込みたい画像 `image_to_embed.png` があるとき、Linux シェルで

 cat image_to_embed.png | base64 >image_to_embed.txt

と打てば、`image_to_embed.txt` に Base64 エンコードされた画像の文字列がでてるはずなので、内容をコピーして

 ![image](data:image/png;base64,*PASTE_HERE* "ALT description")

と書いて、`*PASTE_HERE*` の部分に貼り付ける。 `png` は画像形式に合わせて `webp` `gif` `jpeg` とかに変える。

`base64` が使えない環境 (Windows とか) の場合は [[画像をBase64変換したい 🔍:https://www.google.com/search?q=画像をBase64変換したい]] ってググれば、同等のツールがいろいろ見つかるから、それで代用する。

** e.g. [#f9f3d13a]

 ##Test
 
 ![mogamin](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IArs4c6QAAAARnQU1BAACx
 jwv8YQUAAAAYUExURUcqBzhJF2FyP/nixZE+H////8ZVKwAAAFfEjc8AAAAIdFJOU/////////8A
 3oO9WQAAAAlwSFlzAAAOvwAADr8BOAVTJAAAAKhJREFUSEvFkUESwyAMA0NLy/9/XMVSNQ7JFaND
 LJvdU47xzxFprb1SsPIuCJjmcuGO5lATqbFWeKSni50yQecr586Cb72A0zsyoS4g64Xeux18sRKt
 F7iDQA9e4UpBcIlgx4TD1fRJaiwXkAnNMY1UCgze8Hc/EZSMMsUC6Swgk7NFMMqyUcDDN0KNqC+C
 CgW/MRS0ROzsErDeLyI1SgX36ShSY5Uwxg9xhSFnyqQATAAAAABJRU5ErkJggg== "モガミン")

this makes:

#ref(example.png,wrap,75%)

** 参考資料 [#mc2ca620]
Markdown文書で画像の表示にURLを使わず埋め込む - @teitei_tk Blog
https://teitei-tk.hatenablog.com/entry/2020/04/25/120000

Daring Fireball: Markdown Syntax Documentation
https://daringfireball.net/projects/markdown/syntax

Data URI scheme - Wikipedia
https://ja.wikipedia.org/wiki/Data_URI_scheme