Image

There is only one Markdown image element but the theme distinguishes between two possible positions: stand-alone & embedded.

This is the introduction to the basic syntax and its default layout. You can enhance the image layout in many ways with this theme.

Syntax

The CommonMark image element is syntactically very similar to a link. The only difference is, that the image element begins with an exclamation mark: !.

There are also two notations to reference the source: Directly inline or with an additional reference.

Notation

Inline

![Alternative Text](image.jpg "Optional Title")

The alternative text inside the square brackets [] is used by screen readers, pure text browsers, and all kinds of data scrapers.

The optional title becomes the title attribute in the <img> tag.

Reference

We can place a marker in a second pair of squared brackets to separate the image reference:

![Description][imgref]

We have to provide the image reference somewhere else in the same file by repeating the marker followed by a colon and a space before the path:

[imgref]: long/path/to/image.jpg "Optional Title"

Two possible positions

These two distinctive ways to place an image inside Markdown lead to a different layout:

Stand-alone

Paragraph before…

![Description](image.jpg)

Paragraph after…

By surrounding an image element with empty lines it becomes a Markdown block element and gets treated as a figure.

Embedded

![Description](image.jpg) The 
paragraph containing the image

When we place an image inside our paragraph text it gets embedded as a float.

Layout

Stand-alone

The default for stand-alone images is the text width:

Text width[text]4 minor (or 2 major) columns

All questions asked by five watched experts amaze the judge. Nymphs blitz quick vex dwarf jog. DJs flock by when MTV ax quiz prog.

Embedded

The default for embedded images is the small width:

Small width[small]2 minor columns Quirky spud boys can jam after zapping five worthy Polysixes. Five quacking zephyrs jolt my wax bed. Blowzy red vixens fight for a quick jump. How quickly daft jumping zebras vex. Cozy sphinx waves quart jug of bad milk. Brawny gods just flocked up to quiz and vex him. “Now fax quiz Jack!” my brave ghost pled. Battle of Thermopylae: Quick javelin grazed wry Xerxes. My ex pub quiz crowd gave joyful thanks. J. Fox made five quick plays to win the big prize. Fax back Jim’s Gwyneth Paltrow video quiz. Pack my red box with five dozen quality jugs. Vex quest wizard, judge my backflop hand.

See Also