Skip to content
Back to Journal
GuideMay 2, 2026·2 min read

How to Add an Image in Markdown

Embed images in markdown with alt text, titles, and clickable image links. Syntax and best practices.

The quick answer: Use an exclamation mark before the link syntax: ![alt text](image-url).

Basic Image Syntax

!A cat sitting on a keyboard

The ! tells markdown this is an image. The [ ] contains the alt text. The ( ) contains the image URL.

Alt Text Matters

Alt text serves two purposes: it's read by screen readers for accessibility, and it appears when the image fails to load. Write descriptive alt text — not just "image" or "photo". Bad: ![image](photo.jpg) Good: ![Bar chart showing 23% revenue growth in Q3](chart.jpg)

Adding a Title

Add a quoted title after the URL: ![Alt text](image.jpg "Image title shown on hover")

The title appears as a tooltip when hovering over the image.

Clickable Image (Image Link)

To make an image clickable, nest the image inside a link: [![Alt text](image.jpg)](https://example.com)

This is the standard pattern for badge images in README files.

Local vs Remote Images

Markdown supports both remote URLs (https://...) and relative paths (./images/photo.jpg). Relative paths work when the markdown file and image are in the same repository or directory.

Image Sizing

Standard markdown has no native sizing syntax. Options:

  • Use HTML: Alt text
  • Some platforms (Obsidian) support ![alt|300](image.jpg) with a width hint

Full reference: Markdown Images.

MT

MarkdownTools Team

May 2, 2026

Try it free

Make your AI output beautiful

Paste markdown from ChatGPT or Claude. Pick a theme. Export as PDF or HTML in seconds.

Open App — It's Free