Images are displayed using the img tag in HTML.

Images display and show the pictures or clickable links.

For showing an image, an img tag is used. To get a clickable image link, Wrap the img tag inside the anchor link. Images also contain attributes like height, width src, and alt

In this post, we are going to learn How to

  • adding images to markdown
  • Show images in HTML as links
  • Adding alt to markdown images

How to add an image in Markdown

Images types are inline image or image links with different syntaxes.

Inline images

Adding images in Markdown is simple and easy.

Inline image syntax is similar to links inline syntax except starting starts with! symbol followed by inline links syntax.

Inline links contain text that displays to the user enclosed in square brackets [] and link URL enclosed in parentheses ()

Here is a syntax

![alt text](image url "image Title")

And output is

<img src="image url" alt="alt text" title="image Title" />

alt text added as text to the alt attribute.

image Title added as a title attribute of an image.

The above syntax displays the image,

In the next section, learn how to add a link to the image.

create an image with an anchor link like combining both images inline and inline links

 [![image alt text](image URL link)](anchor link)

[![image alt text](image url link)](anchor link)

It generates and displays an image.

How to add width to markdown images

There is no support for markdown standard syntax for adding width.

You can use a plain img tag which works as expected in markdown pages.

<img src="image url" alt="alt text" title="image Title" width="150"/>

You can also add height using the same img tag.

<img src="image url" alt="alt text" title="image Title" height="150"/>

It is an extended Markdown syntax available for changing height and width.

Easily change width and height in pandoc Markdown syntax.

![text](myphoto.png){ width=60%,height:30px }