Markdownの画像
画像は、前に感嘆符を付けたリンクです：。タイトル、サイズ、キャプション、参照形式の画像、アプリが追加した書き方を説明します。
要点
Markdownで画像を挿入するには？
感嘆符、角括弧の代替テキスト、丸括弧の画像のURLを続けて書きます：。URLの代わりに、Markdownファイルからの相対パスも使えます。Markdownではサイズを指定できないため、width を付けたHTMLの <img> タグを使います。
表示結果
画像の書き方と例
例ではこのサイトの小さな画像を使っています。URLを自分の画像に置き換えてください。
タイトル付きの画像
URLのあとの引用符の中が画像のタイトルになり、マウスを重ねると表示されます。
表示結果
HTMLでサイズを指定する
Markdownにはサイズの記法がありません。<img> タグの width で幅を指定すると、高さは比率に合わせて変わります。
<img src="/samples/landscape.svg" alt="青空の下の緑の丘" width="240">表示結果
参照形式の画像
参照リンクと同じく、画像のURLをラベル付きで文書の別の場所に書けます。
![青空の下の緑の丘][hills]
[hills]: /samples/landscape.svg表示結果
キャプション付きの画像
Markdownにはキャプションの記法がありません。HTMLが使える環境では <figure> と <figcaption> を使います。
<figure>
<img src="/samples/landscape.svg" alt="青空の下の緑の丘" width="300">
<figcaption>春の丘。</figcaption>
</figure>表示結果
Obsidian：縦線のあとに幅
Obsidianでは、代替テキストや埋め込みファイル名のあとに | と数字を書いて幅を指定します。
![[hills.png|200]]Obsidianだけの書き方です。ほかのMarkdownアプリでは表示が異なるため、プレビューはありません。
Pandoc：波括弧でサイズ
Pandocは画像のあとの波括弧から幅と高さを読み取ります。単位はピクセル、センチメートル、パーセントが使えます。
{width=50%}Pandocだけの書き方です。ほかのMarkdownアプリでは表示が異なるため、プレビューはありません。
各サービスでの対応状況
Markdownファイルを表示する環境なら  が使えます。サイズの指定方法とチャットツールでの扱いは異なります。
| サービス | 対応 | 補足 |
|---|---|---|
| GitHub / GitLab | 対応 | 画像と width 付きの <img> に対応し、相対パスはリポジトリ内のファイルを指します。GitHubは <picture> によるダークモード用の画像にも対応しています。 |
| Obsidian | 対応 | 画像と埋め込みに対応し、|300 で幅を指定できます。 |
| Qiita / Zenn | 対応 | 画像に対応しています。Zennは  で幅を指定できます。 |
| Discord / Slack | 非対応 | 画像の記法はなく、画像をアップロードするかURLを貼ります。 |
よくある質問
Markdownで画像のサイズを変えるには？
<img src="image.png" alt="…" width="300">。Obsidianでは 、Pandocでは {width=300px} と書けます。画像を中央に配置するには？
<p align="center"><img src="image.png" alt="…" width="300"></p>。GitHubは align 属性を残しますが、style は取り除きます。画像が表示されないのはなぜですか？
%20 にするか、URLを山括弧で囲みます。! は [ の直前に書きます。代替テキストは何のためにありますか？
パソコンにある画像を挿入するには？
。GitHubでは、Issueやコメントにドラッグしてアップロードすることもできます。GitHubでダークモードのときだけ別の画像を表示するには？
<picture> 要素の中に <source media="(prefers-color-scheme: dark)" srcset="dark.png"> と、ライトモード用の <img> を書きます。画像にキャプションを付けるには？
<figure> と <figcaption> を使います。