Markdown Images

Embedding images in Markdown (linked to the HTML img tag) uses a syntax that is very similar to the link syntax, but with an exclamation mark at the beginning.

Image Syntax

To add an image, start with an exclamation mark (!), followed by alt text in brackets ([Alt text]), and the path or URL to the image in parentheses ((url)).

Images with Titles

Just like links, you can add an optional title to an image. This title is often displayed as a tooltip by browsers when the user hovers over the image.

Linking Images

If you want the image to act as a link (so that clicking it takes the user to another page), you can wrap the entire image syntax in another set of brackets and parentheses for the link.

Reference-Style Images

Just like links, you can use a reference-style syntax for images to keep your document clean.

Tips for Images

Alt Text: Always provide descriptive alt text for accessibility. This is what screen readers use to describe the image.
Sizing: Standard Markdown doesn't provide a way to specify image dimensions (width and height). If you need to control the size, you can use CSS and/or the height and width attributes of the img HTML tag.
Hosting: You can link to images hosted on your own server (using relative paths) or on external websites (using absolute URLs). See the HTML Links lesson in the HTML tutorial for more information about link types.