Markdown Image Syntax - Complete Reference Guide

Everything you need to know about Markdown image syntax. From basic syntax to advanced formatting options.

Basic Markdown Image Syntax

The standard Markdown image syntax is:

![Alt text](image-url)

Syntax Components

  • ! - Exclamation mark indicates an image
  • [Alt text] - Alternative text (required for accessibility)
  • (image-url) - Image URL or path in parentheses

Markdown Image Syntax Examples

Example 1: Basic Image

![Sunset](./images/sunset.jpg)

Result: Displays an image with alt text "Sunset" from local images folder.

Example 2: Online Image URL

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

Example 3: Image with Title (Tooltip)

![Alt text](image.jpg "Image title")

Some Markdown renderers support title attribute that shows on hover.

Image Reference Syntax

You can also use reference-style images for cleaner Markdown:

Reference-Style Image

![Alt text][image-ref]

[image-ref]: https://example.com/image.jpg "Optional title"

This is useful when you use the same image multiple times or want cleaner Markdown.

Advanced Image Formatting

Image with Link

Make an image clickable:

[![Image alt text](image.jpg)](https://example.com)

Image Size and Alignment (HTML)

Some Markdown renderers support HTML for advanced formatting:

<img src="image.jpg" alt="Alt text" width="500" height="300">

Note: HTML support varies by Markdown renderer. Check your platform's documentation.

Markdown Image Path Types

1. Absolute URL

![Image](https://example.com/image.jpg)

2. Relative Path

![Image](./images/photo.jpg)

Relative to the current Markdown file location.

3. Root Relative Path

![Image](/images/photo.jpg)

Relative to the website root.

Best Practices

  • Always use alt text - Essential for accessibility and SEO
  • Use descriptive alt text - Describe the image content, not just "image"
  • Optimize image file size - Compress images before uploading
  • Use appropriate formats - JPG for photos, PNG for graphics with transparency
  • Host images reliably - Use GitHub, CDN, or image hosting services

Common Issues

If images aren't displaying correctly, check:

  • Path syntax is correct
  • Image URL is accessible
  • File extension matches actual file type
  • Relative paths are correct relative to Markdown file location

For detailed troubleshooting, see: Markdown Image Not Showing

Related Guides

Need Help Adding Images?

Use our free tool to automatically generate correct Markdown image syntax. No manual coding required!

Try Free Tool →