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

サーバ詳細説明欄に URL を使わずに画像を埋め込む†

Mastodon のサーバ詳細説明欄は Markdown が使えるので、Markdown 記法にしたがい、画像の URL を指定することで画像を埋め込める。

が、サイズの小さい画像であれば、画像を Base64 に変換した文字列を 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変換したい 🔍 ってググれば、同等のツールがいろいろ見つかるから、それで代用する。

e.g.†

##Test

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

this makes:

参考資料†

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

Menu

Logbook
command snippet
command snippet/windows
Mastodon
さくらのVPS

最新の20件

edit