How to add an image in Markdown

Use an image from your project

Point to the file with a path. A path that does not start with / or http starts from the folder your Markdown file is in.

![Screenshot of the settings page](images/settings.png)

That works on GitHub and in apps that open the whole folder. The example above shows no picture here because this page has no images folder, which is exactly what happens when a path is wrong.

Use an image from the web

Give the full address, starting with https://.

![MarkdownPaper logo](https://markdownpaper.app/icon-192.png)

Change the image size

Markdown has no way to set a size. Use an HTML img tag with a width instead. Most renderers, GitHub and MarkdownPaper included, allow it.

You write

<img src="/icon-192.png" alt="MarkdownPaper logo" width="64">

You see

Give only the width, and the height follows, so the image keeps its shape.

Center an image

Wrap the image in a paragraph with align="center". This is old HTML, but it is the way that works on GitHub, where styles are removed.

<p align="center">
  <img src="/icon-192.png" alt="MarkdownPaper logo" width="80">
</p>

Add a caption

Markdown has no caption either. The simplest way is a line of italic text under the image. In HTML, a figure with a figcaption is the proper way.

You write

<figure>
  <img src="/icon-192.png" alt="MarkdownPaper logo" width="80">
  <figcaption>The MarkdownPaper mark.</figcaption>
</figure>

You see

Make an image a link

Put the whole image inside a link's square brackets.

[![MarkdownPaper logo](/icon-192.png)](https://markdownpaper.app)

Show a title on hover

Add text in quotes after the address.

![MarkdownPaper logo](/icon-192.png "The reader for Markdown")

Images side by side

Put the images on the same line, with no empty line between them.

<img src="/icon-192.png" alt="Logo" width="48"> <img src="/icon-192.png" alt="Logo again" width="48">

Why an image does not show

• The path is wrong. Check the folder and the file name, including capital letters. Logo.png and logo.png are different files on most servers.
• There is a space in the file name. Write it as %20, or rename the file.
• The ! is missing. Without it you get a link, not an image.
• The app cannot see the file. A web page cannot read pictures from your computer. A README with relative images shows them on GitHub, and the MarkdownPaper desktop app shows them when you open the folder.

Questions

Can I add an image from my computer to Markdown?

Yes. Put the image in the same folder as the Markdown file, or a folder inside it, and use a relative path like images/photo.png. Keep the two together when you move or share them.

What image formats work in Markdown?

Whatever the browser or app can show: PNG, JPG, GIF, WebP and SVG all work almost everywhere.

How do I resize an image in Markdown on GitHub?

Use an HTML img tag with a width, like <img src="image.png" alt="Description" width="300">. GitHub keeps the width and removes any style attribute.

What is alt text in Markdown?

The words in the square brackets. They describe the image for people who cannot see it and appear when the image fails to load.

Next

• Markdown links, which work the same way without the !.
• Read a README with its images from a GitHub link.