Markdown Image Syntax to HTML img Tags

Markdown Images to HTML

Markdown image syntax is similar to links but prefixed with an exclamation mark (!). Images convert to self-closing HTML <img> tags.

Basic Image Syntax

![Alt text](https://example.com/image.png)

Converts to:

<img src="https://example.com/image.png" alt="Alt text">

The alt text inside the square brackets becomes the alt attribute, which is essential for accessibility and SEO.

Image with Title

Add a title in quotes for a tooltip:

![Screenshot](./screenshot.png "Application screenshot")

Converts to:

<img src="./screenshot.png" alt="Screenshot" title="Application screenshot">

Reference-Style Images

Like reference links, images can use reference-style syntax:

![Logo][logo]

[logo]: /images/logo.svg "Company Logo"

Linked Images

Wrap an image in link syntax to make it clickable:

[![Alt text](image.png)](https://example.com)

Converts to:

<a href="https://example.com"><img src="image.png" alt="Alt text"></a>

Limitations of Markdown Images

Standard Markdown does not support setting image width, height, or CSS classes. For more control, you can use raw HTML within your Markdown:

<img src="photo.jpg" alt="Photo" width="400" height="300">

Most Markdown parsers pass through raw HTML elements, giving you full control when the basic syntax is insufficient.