Markdownの画像は、前に感嘆符が付いたリンクです。記法はそれで全部で、似ているのは偶然ではありません。[文字](url) はページを取りに行き、![文字](url) は絵を埋め込みます。

画像 — 代替テキストを入れ替えてみてください
Markdown
![机の上の紙とペン](/images/desk.jpg)

タイトルつきの画像:

![机](/images/desk.jpg "静かに書ける場所")

リンクにもなっている画像:

[![机](/images/desk.jpg)](/ja/markdown-guide)
Preview

机の上の紙とペン

タイトルつきの画像:

机

リンクにもなっている画像:

机

代替テキストは省略できません

角かっこの中は代替テキストです。スクリーンリーダーが読み上げる説明であり、画像が読み込めなかったときに表示される文字でもあります。画像の記法のうち、みんなが飛ばす部分であり、いちばん大事な部分です。

その画像が何であるかではなく、何を示しているかを書いてください。

Markdown
![](/chart.png)
![グラフ](/chart.png)
![3月のリリース後にダウンロードが3倍になった](/chart.png)
Preview

グラフ 3月のリリース後にダウンロードが3倍になった

1つめは目の見えない読者にとって存在しないのと同じです。2つめは何も伝えません。3つめは画像の趣旨を伝えます。そしてそれは、検索エンジンが画像を理解するために読むものでもあります。

例外があります。純粋に装飾のための画像は代替テキストをにしてください(![](/divider.png))。そうすればスクリーンリーダーはファイル名を読み上げず、飛ばしてくれます。

タイトル

リンクと同じく、パスのあとの引用符つきの文字列はツールチップになります。

Markdown
![机](/images/desk.jpg "ローマで撮影")
Preview

机

これはキャプションではなく、代替テキストの代わりでもありません。タッチ端末ではそもそも出ません。

リンクとしての画像

画像全体をリンクの記法で包みます。入れ子は最初に見ると奇妙です。

Markdown
[![App Storeで入手](/badge.png)](https://apps.apple.com/app/id6752715912)
Preview

App Storeで入手

代替テキストは絵だけでなく行き先も説明することになるので、押したらどこへ行くのかが分かるように書いてください。

参照形式

長い画像パスは、リンクのURLと同じように段落を詰まらせます。対処も同じです。

Markdown
![Macのエディタ][mac-shot]

[mac-shot]: /images/mac-editor.png "ライブプレビューつきの分割表示"
Preview

Macのエディタ

サイズ、配置、キャプション

Markdownに画像サイズの記法はありません。配置の記法もキャプションの記法もありません。これは意図的です。Markdownは中身を書くもので、絵の大きさはスタイルシートの領分です。

正直な選択肢は3つです。

  1. ファイルそのものを縮める。 たいていはこれが正解です。4000ピクセルの写真を600ピクセルで表示するのは、ページを開くたびに捨てている帯域です。
  2. CSSで整える。 本文領域の中の画像を対象にした1つの規則が、文書のすべての画像をまかないます。
  3. 生のHTMLを使う。 <img src="…" width="600" alt="…">。そのファイルが持ち運べるMarkdownでなくなることは、受け入れることになります。

独自の拡張を作った道具もあります(![alt](img.png =600x400) のようなもの)。その道具の中では動き、ほかのどこでも動きません。ファイルを動かす気があるなら避けてください。

キャプションが欲しいときは、画像のすぐ下に斜体の1行を置くのが慣習的な回避策です。

パス

サイトやリポジトリの内側では、相対パスがほぼ常に良い選択です。

Markdown
![構成図](./images/architecture.png)
![ロゴ](/icon-128.png)
Preview

構成図 ロゴ

ドメインが変わっても効き続け、オフラインでも動きます。絶対URLはよそに置かれた画像には筋が通りますが、そのホストが消えればあなたの画像も消えることは覚えておいてください。

よくある間違い

! を忘れる。 それがないと、画像ではなく画像へのリンクになります。

どこもかしこも代替テキストが空。 装飾なら問題ありませんが、意味を持つ画像では本物のアクセシビリティの失敗です。

ファイル名の中の空白。 リンクとまったく同じで、パスを山かっこで囲むかエンコードしてください。

画像が自動で縮むと思う。 そのための記法はありません。ファイルを縮めるか、CSSの規則を書いてください。

まだ存在しない画像へリンクする。 プレビューには壊れたアイコンが出るだけで、そのまま公開してしまいがちです。出す前にパスを確かめてください。

よくある質問

Markdownで画像を入れるには?

![代替テキスト](path/to/image.jpg) と書きます。感嘆符が画像とリンクを分け、角かっこが代替テキストを、丸かっこがパスを持ちます。

画像のサイズを変えるには?

標準のMarkdownではできません。サイズの記法がないからです。画像ファイル自体を縮めるか、本文の画像に対するCSSの規則を足すか、持ち運びやすさと引き換えにHTMLの <img>width に逃げてください。

代替テキストには何を書きますか?

その画像が何を示していて、なぜそこにあるのかを書きます。「グラフ」ではなく「3月のリリース後にダウンロードが3倍になった」です。純粋な装飾なら、スクリーンリーダーが飛ばせるように空にしてください。

画像を押せるようにするには?

画像をリンクの記法で包みます:[![alt](image.png)](https://example.com)。画像がリンクの中身になります。

画像にキャプションを付けられますか?

直接はできません。慣習では画像のすぐ下に斜体の1行を置きます。対応している処理系はそれを本物の <figcaption> にすることもありますが、たいていは斜体の文字として出すだけです。それでもキャプションとして読めます。