Markdown by Example: Images

CommonMark / GFM

Images are similar to links but with an exclamation mark. This example shows how to embed images.

Code

Inline image:
![Alt Text](/path/to/image.jpg)

Image with title:
![Alt Text](/path/to/image.jpg "Image Title")

Reference-style image:
![Alt Text][logo]

[logo]: /assets/logo.png

Linked image (image inside a link):
[![Alt Text](image.jpg)](https://www.example.com)

Explanation

The syntax for images is almost identical to links, but it starts with an exclamation mark !. It looks like ![Alt Text](URL). The text in the brackets becomes the alt attribute of the image, which is important for accessibility and is displayed if the image fails to load.

Like links, images can also use the reference style. This is useful if you use the same image multiple times in a document (like a small icon) and want to manage the URL in one place. Note that standard Markdown does not support resizing images; you usually have to use raw HTML <img width="100" ...> for that.

To make an image clickable (a linked image), you simply wrap the image syntax inside the link syntax. [![Alt](img)](url). This is commonly used for buttons or thumbnail galleries where clicking the image takes you to a larger version or a related page.

Code Breakdown

2

![Alt Text] The exclamation mark is the key difference from a link.

12

[![Alt](img)](link) nests the image structure inside the link brackets.

Samplebadu

Markdown by Example: Images

Code

Explanation

Code Breakdown