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.

Answer 1

I came here searching for an answer. Some awesome suggestions here. And gold information pointing out that markdown supports HTMl completely!

A good clean solution is always to go with pure html syntax for sure. With the tag.

But I was trying to still stick to the markdown syntax so I tried wrapping it around a tag and added whatever attributes i wanted for the image inside the div tag. And it WORKS!!

<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>

So this way external images are supported!

Just thought I would put this out there as it isn't in any of the answers. :)

Answer 2

If you are using kramdown, you can do this:

{:.foo}
![drawing](drawing.jpg)

Then add this to your Custom CSS:

.foo {
  text-align: center;
  width: 100px;
}

Answer 3

I know that this answer is a bit specific, but it might help others in need.

As many photos are uploaded using the Imgur service, you can use the API detailed here to change the size of the photo.

When uploading a photo in a GitHub issue comment, it will be added through Imgur, so this will help a lot if the photo is very big.

Basically, instead of http://i.imgur.com/12345.jpg, you would put http://i.imgur.com/12345m.jpg for medium sized image.

Answer 4

For all looking for solutions which work in R markdown/ bookdown, these of the previous solutions do/do not work or need slight adaption:

Working

• Append { width=50% } or { width=50% height=50% }

  • ![foo](foo.png){ width=50% }

  • ![foo](foo.png){ width=50% height=50% }

  • Important: no comma between width and height – i.e. { width=50%, height=30% } won't work!

• Append { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • Note: {:height="36px" width="36px"} with colon, as from @sayth, seems not to work with R markdown

Not working:

• Append =WIDTHxHEIGHT
  • after the URL of the graphic file to resize the image (as from @prosseek)
  • neither =WIDTHxHEIGHT ![foo](foo.png =100x20) nor =WIDTH only ![foo](foo.png =250x) work

Answer 5

If changing the initial markdown is not an option for you, this hack might work:

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

I used this to be able to resize images before sending them in an email (as Outlook ignores any image css styling)

Answer 6

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