How to insert images in Markdown?

HTML provides img element to insert images in web pages. The img element has two essential attributes, src and alt.

The src attribute represents the image URL. You can specify the absolute or relative path in the image URL.

The alt attribute serves as an alternate text for an image. It is shown when an image, for some reason, does not display.

The img element also has an optional title attribute which is displayed when someone hovers the image.

In Markdown, images are displayed using these three attributes. To insert an image, you write an exclamation mark followed by alt text inside square brackets and then image URL within parenthesis. Inside the parenthesis, you can specify the title text using single or double quotes.

![alt text](Image URL 'title text')
OR
![alt text](Image URL "title text")

Note: In Markdown, images and links are created similarly, except that in images, you add an exclamation mark before square brackets, and in links, you don't use an exclamation mark.

Markdown Code
![Markdown Logo](https://www.tutorialsandyou.com/images/markdownlogo.png 'Markdown Tutorial')
HTML Output
<img src="https://www.tutorialsandyou.com/images/markdownlogo.png" alt="Markdown Logo" title="Markdown Tutorial" />
Rendered Output
Markdown Logo

How to add links to images in Markdown?

To create a link on an image, you must write the code for the Markdown image inside square brackets and then provide the URL in parenthesis.

[![Image alt text](Image URL)](URL)
Markdown Code
[![Markdown Logo](https://www.tutorialsandyou.com/images/markdownlogo.png)](https://www.tutorialsandyou.com/markdown/)
HTML Output
<a href="https://www.tutorialsandyou.com/markdown/"><img src="https://www.tutorialsandyou.com/images/markdownlogo.png" alt="Markdown Logo" /></a>
Rendered Output
Markdown Logo