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) 

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" /> 

Just use:

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

instead of:

![](Assets/icon.png) 

Combining two answers I came out with a solution, that might not look that pretty,
but it works!

It creates a thumbnail with a specific size that might be clicked to bring you to the max resolution image.

[<img src="image.png" width="250"/>](image.png) 

Here's an example! I tested it on Visual Code and Github.

More broadly, this syntax allows you to make the image clickable by linking it to a destination, for example:

[<img src="image.png" width="250"/>](https://stackoverflow.com/) 

Thanks to the feedback, we know that this also works on:

• GitLab
• Jupyter Notebook
• StackOverflow

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

Maybe this has recently changed but the Kramdown docs show a simple solution.

From the docs

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}. And here is a referenced ![smile] [smile]: smile.png {: height="36px" width="36px"} 

Works on github with Jekyll and Kramdown.

Replace ![title](image-url.type) with <img src="https://image-url.type" width="200" height="200"/>

One might draw on the alt attribute that can be set in almost all Markdown implementations/renderes together with CSS-selectors based on attribute values. The advantage is that one can easily define a whole set of different picture sizes (and further attributes).

Markdown:

![minipic](mypic.jpg) 

CSS:

img[alt="minipic"] { max-width: 20px; display: block; } 

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; } 

Building on from Tiemes answer, if you're using CSS 3 you can use a substring selector:

This selector will match any image with an alt tag that ends with '-fullwidth':

img[alt$="-fullwidth"]{ width: 100%; display: block; } 

Then you can still use the alt tag for its intended purpose to describe the image.

The Markdown for the above could be something like:

![Picture of the Beach -fullwidth](beach.jpg) 

I've been using this in Ghost markdown, and it has been working well.

If you are using reference style images in GitHub Flavored Markdown:

Here is an image of tree: ![alt text][tree]{height=400px width=500px} [//]: # (Image References) [tree]: ./images/tree.png "This is a tree" 

Not a universal solution, but if you're working in Obsidian it has its own syntax for this:

![Engelbart|100x145](https://history-computer.com/ModernComputer/Basis/images/Engelbart.jpg) 

Or, to use the example from the question:

![drawing|200x100](drawing.jpg) 

From: Basic formatting syntax - Obsidian Help

For those intereseted in an rmarkdown and knitr solution. There are some ways to resize images in an .rmd file without the use of html:

You can simply specify a width for an image by adding {width=123px}. Don't introduce whitespace in between the brackets:

![image description]('your-image.png'){width=250px} 

Another option is to use knitr::include_graphics:

```{r, fig.cap="image description", out.width = '50%'} knitr::include_graphics('your-image.png') ``` 

If you have one image in each md file, one handy way to control image size is:

adding css style as follows:

## Who Invented JSON? `Douglas Crockford` Douglas Crockford originally specified the JSON format in the early 2000s. ![Douglas Crockford](img/Douglas_Crockford.jpg) <style type="text/css"> img { width: 250px; } </style> 

and the output will be like:

If you have more images in each md page, then the handy way to control each image or each customized tag is to define each element in css. For this case for the img tag we could have:

//in css or within style tags: img[alt="Result1"] { width: 100px; } img[alt="Result2"] { width: 200px; } img[alt="Result3"] { width: 400px; } // try in md one of the methods shown below to insert image in your document:

 <br/> <img src="https://i.sstatic.net/xUb54.png" alt="Result1"> <br/> <img src="https://i.sstatic.net/xUb54.png" alt="Result2"> <br/> <img src="https://i.sstatic.net/xUb54.png" alt="Result3"> <br/> <br/> in md:<br/> ![Result1](img/res-img-1.png) <br/> ![Result2](img/res-img-2.png) <br/> ![Result3](img/res-img-3.png) 

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

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. :)

This one works for me it's not in one line but i hope it works for you.

<div> <img src="attachment:image.png" width="500" height="300"/> </div> 

You could use this one as well with kramdown:

markdown ![drawing](drawing.jpg) {:.some-css-class style="width: 200px"} 

or

markdown ![drawing](drawing.jpg) {:.some-css-class width="200"} 

This way you can directly add arbitrary attributes to the last html element. To add classes there is a shortcut .class.secondclass.

I scripted the simple tag parser for using a custom-size img tag in Jekyll.

https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079

{% img /path/to/img.png 100x200 %} 

You can add the file to the _plugins folder.

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 https://i.sstatic.net/Y682Q.gif, you would put http://i.imgur.com/12345m.jpg for medium sized image.

For those using Markdown on Google Colaboratory, there is no need to have the image uploaded to the session storage folder, or linked on Google Drive. If the image has a URL, and it can be included on the Jupyter notebook, and its size changed as follows:

<img src="https://image.png" width="500" height="500" /> 

Note that entering just the width leaving the height completely out allows the image to adjust to small screens (i.e. phone).

Resizing Markdown Image Attachments in Jupyter Notebook

I'm using jupyter_core-4.4.0 & jupyter notebook.

If you're attaching your images by inserting them into the markdown like this:

![Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png](attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png) 

These attachment links don't work:

<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/> 

DO THIS. This does work.

Just add div brackets.

<div> <img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/> </div> 

Hope this helps!

For R-Markdown, neither of the above solutions worked for me, so I turned to regular LaTeX syntax, which works just fine.

\begin{figure} \includegraphics[width=300pt, height = 125 pt]{drawing.jpg} \end{figure} 

Then you can use e.g. the \begin{center} statement to center the image.

Via plain backward compatible MD:

![<alt>](<imguri>#<w>x<h> "<title>") 

where w, h defines the bounding box to aspect fit into, as eg in Flutter package https://pub.dev/packages/flutter_markdown

Code: https://github.com/flutter/packages/blob/9e8f5227ac14026c419f481ed1dfcb7b53961475/packages/flutter_markdown/lib/src/builder.dart#L473

Reconsider html workarounds breaking compatibility as people might use native/non-html components/apps to display markdown.

When using Flask (I am using it with flat pages)... I found that enabling explicitly (was not by default for some reason) 'attr_list' in extensions within the call to markdown does the trick - and then one can use the attributes (very useful also to access CSS - class="my class" for example...).

FLATPAGES_HTML_RENDERER = prerender_jinja

and the function:

def prerender_jinja(text): prerendered_body = render_template_string(Markup(text)) pygmented_body = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list']) return pygmented_body 

And then in Markdown:

![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px} 

There is way with add class and css style

![pic][logo]{.classname}

then write down link and css below

[logo]: (picurl) <style type="text/css"> .classname{ width: 200px; } </style> 

Reference Here

For future reference:

Markdown implementation for Joplin allows controlling the size of imported images in the following manner:

<img src=":/7653a812439451eb1803236687a70ca" width="450"/>

This feature was requested here and as promised by Laurent this has been implemented.

It took me a while to figure the Joplin specific answer.

Put the image URL in tag below. Remember to change the width and height accordingly. Like This

<img src="IMAGE_URL_HERE" width="300" height="300"> 

You can specify width without height attribute and vice versa.

Alternatively, you can change image size using percentage value like below:

<img src="IMAGE_URL_HERE" width=50% height=50%> 

Well, some of us do not like warnings. Those warnings come from Markdown linting. So there are two things you need to do:

1. Use in-line html:

• Instead of using: ![drawing](drawing.jpg)

• use: <img src="Assets/icon.png" width=250 height=200>

• 250 and 200 being the preferred width and height of your image, respectively! You can choose to use only one attribute and ignore the other.

2. Bring down the warnings:

• At the root of your project, create a .markdownlint.json file with the following contents:

{ "MD033": false, "MD013": false } 

To suppress the warnings. Add other warnings you'd like to suppress here!