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

Fake bugs put in wax jonquils drive him crazy. Glib jocks quiz nymph to vex dwarf. Fat hag dwarves quickly zap jinx mob.

Embedded

The default for embedded images is the small width:

Small width[small]2 minor columns A quivering Texas zombie fought republic linked jewelry. Boxers had zap of gay jock love, quit women. Sex-charged fop blew my junk TV quiz. Big July earthquakes confound zany experimental vow. Vex quest wizard, judge my backflop hand. Pack my red box with five dozen quality jugs. Kvetching, flummoxed by job, W. zaps Iraq. My faxed joke won a pager in the cable TV quiz show. Fat hag dwarves quickly zap jinx mob. Fickle jinx bog dwarves spy math quiz. Quick brown fox jumps over the lazy dog. Twelve ziggurats quickly jumped a finch box. A quick movement of the enemy will jeopardize six gunboats.

See Also