GFM

# Images

Syntax for images is like the syntax for links, with one difference. Instead of link text (opens new window), we have an image description (opens new window). The rules for this are the same as for link text (opens new window), except that (a) an image description starts with ![ rather than [, and (b) an image description may contain links. An image description has inline elements as its contents. When an image is rendered to HTML, this is standardly used as the image’s alt attribute.

Example 580

Markdown HTML Demo
 
![foo](/url "title")


<p><img src="/url" alt="foo" title="title" /></p>

Example 581

Markdown HTML Demo
 
![foo *bar*]

[foo *bar*]: train.jpg "train & tracks"


<p><img src="train.jpg" alt="foo bar" title="train &amp; tracks" /></p>

Example 582

Markdown HTML Demo
 
![foo ![bar](/url)](/url2)


<p><img src="/url2" alt="foo bar" /></p>

Example 583

Markdown HTML Demo
 
![foo [bar](/url)](/url2)


<p><img src="/url2" alt="foo bar" /></p>

Though this spec is concerned with parsing, not rendering, it is recommended that in rendering to HTML, only the plain string content of the image description (opens new window) be used. Note that in the above example, the alt attribute’s value is foo bar, not foo [bar](/url) or foo <a href="/url">bar</a>. Only the plain string content is rendered, without formatting.

Example 584

Markdown HTML Demo
 
![foo *bar*][]

[foo *bar*]: train.jpg "train & tracks"


<p><img src="train.jpg" alt="foo bar" title="train &amp; tracks" /></p>

Example 585

Markdown HTML Demo
 
![foo *bar*][foobar]

[FOOBAR]: train.jpg "train & tracks"


<p><img src="train.jpg" alt="foo bar" title="train &amp; tracks" /></p>

Example 586

Markdown HTML Demo
 
![foo](train.jpg)


<p><img src="train.jpg" alt="foo" /></p>

Example 587

Markdown HTML Demo
 
My ![foo bar](/path/to/train.jpg  "title"   )


<p>My <img src="/path/to/train.jpg" alt="foo bar" title="title" /></p>

Example 588

Markdown HTML Demo
 
![foo](<url>)


<p><img src="url" alt="foo" /></p>

Example 589

Markdown HTML Demo
 
![](/url)


<p><img src="/url" alt="" /></p>

Reference-style:

Example 590

Markdown HTML Demo
 
![foo][bar]

[bar]: /url


<p><img src="/url" alt="foo" /></p>

Example 591

Markdown HTML Demo
 
![foo][bar]

[BAR]: /url


<p><img src="/url" alt="foo" /></p>

Collapsed:

Example 592

Markdown HTML Demo
 
![foo][]

[foo]: /url "title"


<p><img src="/url" alt="foo" title="title" /></p>

Example 593

Markdown HTML Demo
 
![*foo* bar][]

[*foo* bar]: /url "title"


<p><img src="/url" alt="foo bar" title="title" /></p>

The labels are case-insensitive:

Example 594

Markdown HTML Demo
 
![Foo][]

[foo]: /url "title"


<p><img src="/url" alt="Foo" title="title" /></p>

As with reference links, whitespace (opens new window) is not allowed between the two sets of brackets:

Example 595

Markdown HTML Demo
 
![foo] 
[]

[foo]: /url "title"


<p><img src="/url" alt="foo" title="title" />
[]</p>

Shortcut:

Example 596

Markdown HTML Demo
 
![foo]

[foo]: /url "title"


<p><img src="/url" alt="foo" title="title" /></p>

Example 597

Markdown HTML Demo
 
![*foo* bar]

[*foo* bar]: /url "title"


<p><img src="/url" alt="foo bar" title="title" /></p>

Note that link labels cannot contain unescaped brackets:

Example 598

Markdown HTML Demo
 
![[foo]]

[[foo]]: /url "title"


<p>![[foo]]</p>
<p>[[foo]]: /url &quot;title&quot;</p>

The link labels are case-insensitive:

Example 599

Markdown HTML Demo
 
![Foo]

[foo]: /url "title"


<p><img src="/url" alt="Foo" title="title" /></p>

If you just want a literal ! followed by bracketed text, you can backslash-escape the opening [:

Example 600

Markdown HTML Demo
 
!\[foo]

[foo]: /url "title"


<p>![foo]</p>

If you want a link after a literal !, backslash-escape the !:

Example 601

Markdown HTML Demo
 
\![foo]

[foo]: /url "title"


<p>!<a href="/url" title="title">foo</a></p>