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

Quick fox jumps nightly above wizard. Quick zephyrs blow, vexing daft Jim. The quick onyx goblin jumps over the lazy dwarf.

Embedded

The default for embedded images is the small width:

Small width[small]2 minor columns Jackdaws love my big sphinx of quartz. Jacky can now give six big tips from the old quiz. My jocks box, get hard, unzip, quiver, flow. DJs flock by when MTV ax quiz prog. Painful zombies quickly watch a jinxed graveyard. Bawds jog, flick quartz, vex nymph. Fox nymphs grab quick-jived waltz. My ex pub quiz crowd gave joyful thanks. Joaquin Phoenix was gazed by MTV for luck. Waltz job vexed quick frog nymphs. Who packed five dozen old quart jugs in my box? Quilt frenzy jackdaw gave them best pox. Foxy diva Jennifer Lopez wasn’t baking my quiche.

See Also