Changing image size in Markdown

Question

I just got started with Markdown. I love it, but there is one thing bugging me: How can I change the size of an image using Markdown?

The documentation only gives the following suggestion for an image:

![drawing](drawing.jpg)

If it is possible I would like the picture to also be centered. I am asking for general Markdown, not just how GitHub does it.

Solution 1

You could just use some HTML in your Markdown:

<img src="drawing.jpg" alt="drawing" width="200"/>

Or via style attribute (not supported by GitHub)

<img src="drawing.jpg" alt="drawing" style="width:200px;"/>

Or you could use a custom CSS file as described in this answer on Markdown and image alignment

![drawing](drawing.jpg)

CSS in another file:

img[alt=drawing] { width: 200px; }

Solution 2

With certain Markdown implementations (including Mou and Marked 2 (only macOS)) you can append =WIDTHxHEIGHT after the URL of the graphic file to resize the image. Do not forget the space before the =.

![](./pic/pic1_50.png =100x20)

You can skip the HEIGHT

![](./pic/pic1s.png =250x)

And Width

![](./pic/pic1s.png =x250)

Solution 3

The accepted answer here isn't working with any Markdown editor available in the apps I have used till date like Ghost, Stackedit.io or even in the StackOverflow editor. I found a workaround here in the StackEdit.io issue tracker.

The solution is to directly use HTML syntax, and it works perfectly:

<img src="http://....jpg" width="200" height="200" />

Solution 4

Just use:

<img src="Assets/icon.png" width="200">

instead of:

![](Assets/icon.png)

Solution 5

If you are writing MarkDown for PanDoc, you can do this:

![drawing](drawing.jpg){ width=50% }

This adds style="width: 50%;" to the HTML <img> tag, or [width=0.5\textwidth] to \includegraphics in LaTeX.

Source: http://pandoc.org/MANUAL.html#extension-link_attributes

View more solutions