What is the difference between a link and an image in Markdown?

They use the same bracket syntax, but an image starts with an exclamation mark: [text](url) is a link and ![alt](url) is an image.

How do I make an image clickable in Markdown?

Nest the image inside a link: [![alt text](image-url)](destination-url). Clicking the image then opens the destination URL.

When should I use reference-style links?

Use them when long URLs make a paragraph hard to read. You write [text][id] inline and define [id]: https://url once, usually at the bottom of the document.

Markdown editor guide

How to Add Links and Images in Markdown

Add inline links, reference links, and images in Markdown, including titles and clickable image links.

Direct answer

A Markdown link is [visible text](https://url) and an image is the same with a leading exclamation mark: ![alt text](https://url). Use reference-style [text][ref] links to keep long paragraphs clean, and wrap an image in a link to make it clickable. Preview each one to confirm the URL resolves.

Open the Markdown Editor

When to use this

You want to add a clickable link or an inline image to Markdown.
Your paragraphs are cluttered with long URLs you want to move out of the way.
You need an image that links somewhere when clicked.

Steps

Write a basic link as [visible text](https://url).
Add a hover title with [text](https://url "Title text").
Insert an image with ![alt text](https://url); the alt text describes it for accessibility.
Use reference links [text][id] with [id]: https://url defined at the bottom to declutter.
Make an image clickable by wrapping it: [![alt](image-url)](link-url).
Preview to confirm each link opens and each image loads.

Example

Markdown you type

A basic [link to MarkdownMe](https://markdownme.com).

A link with a [tooltip](https://markdownme.com "Free Markdown tools").

An inline image:

![MarkdownMe logo](https://example.com/logo.png)

A clickable image:

[![Open the editor](https://example.com/logo.png)](https://markdownme.com/tools/markdown-editor)

Reference style: see the [docs][1].

[1]: https://markdownme.com/tools

How it renders

A basic link to MarkdownMe.  (underlined, clickable)

A link with a tooltip.  (title shows on hover)

An inline image:
[image: MarkdownMe logo]

A clickable image:
[image that links to /tools/markdown-editor]

Reference style: see the docs.  (resolves to /tools)

Common mistakes

Do not leave a space between the ] and the ( in a link, or it renders as literal text.
Image alt text is not optional for accessibility; describe the image, do not leave it blank.
Reference labels must match exactly, including case, between [text][id] and the [id]: definition.

FAQ

What is the difference between a link and an image in Markdown?: They use the same bracket syntax, but an image starts with an exclamation mark: [text](url) is a link and ![alt](url) is an image.
How do I make an image clickable in Markdown?: Nest the image inside a link: [![alt text](image-url)](destination-url). Clicking the image then opens the destination URL.
When should I use reference-style links?: Use them when long URLs make a paragraph hard to read. You write [text][id] inline and define [id]: https://url once, usually at the bottom of the document.

Related Markdown editor guides

Markdown Syntax Cheat Sheet

A copy-ready Markdown cheat sheet covering headings, bold, italics, lists, links, images, code, tables, and blockquotes.

How to Write a README in Markdown

Structure a clear README.md with a title, badges, install and usage sections, and a live preview before you commit.

Markdown Table Syntax

Write Markdown tables with pipes and dashes, set column alignment, and keep them readable in the editor before you paste.

Markdown for GitHub Comments

Format GitHub issue and pull request comments with task lists, code blocks, mentions, and collapsible sections.

Markdown Editor With Live Preview Online

Edit Markdown on the left and see the rendered result on the right in real time, with no login and browser-only drafts.

Markdown Task List and Checkboxes

Create checkbox task lists in Markdown for READMEs, GitHub issues, and personal to-do notes with live preview.

Markdown Code Blocks and Syntax Highlighting

Add fenced code blocks with a language for syntax highlighting, plus inline code, in Markdown.

Desk gear for long writing sessions

A few things that help if you write docs, tickets, and specs on a laptop all day.

Dock

Anker 5-in-1 USB-C Hub

One cable turns a laptop into a desk setup. Drives a 4K display, charges at up to 85W, and adds three data ports.

4K HDMI output
85W max power delivery
1x USB-C + 2x USB-A, 5Gbps each
MacBook Pro, MacBook Air, Dell

Check price on Amazon →Monitor · I use this

Dell 27" S2725QC 4K

The monitor I write and review documents on. 163 PPI keeps small text sharp, and USB-C carries video and power on one cable.

3840x2160 IPS, 163 PPI
120Hz, 4ms, FreeSync Premium
99% sRGB
USB-C, HDMI, DisplayPort

Check price on Amazon →Laptop

Apple MacBook Neo 13" (A18 Pro)

The cheapest way into an Apple-silicon machine that runs local models. Fanless, and the Liquid Retina panel holds small text at a full day of reading.

A18 Pro chip, built for Apple Intelligence
8GB unified memory, 256GB SSD
13-inch Liquid Retina display
1080p FaceTime HD camera

Check price on Amazon →

Amazon affiliate links. We earn a commission on qualifying purchases at no extra cost to you.