1802

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.

7
  • 2
    For top image (like repo logo) I just make a "white padding" in original image before export to PNG. Commented Oct 21, 2020 at 22:09
  • 2
    You should really fix the accepted answer the to HTML one as the current answer uses non-standard markdown features that don't work broadly
    – VoteCoffee
    Commented Apr 14, 2021 at 15:22
  • 2
    What is that ! about?
    – buhtz
    Commented Dec 11, 2022 at 12:15
  • 4
    @buhtz It is to differentiate a normal HTML link [text](URL) from an image ![alt text](image URL).
    – VonC
    Commented Dec 24, 2022 at 9:26
  • 13
    Note: GitLab 15.7+, Dec. 2022, officially adopts the ![alt text](image URL){width=x height=y} convention.
    – VonC
    Commented Dec 24, 2022 at 9:43

40 Answers 40

1857

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; }
8
  • 79
    Using inline style does not work in most websites (e.g. GitHub) site it will get sanitized. Prefer width and height instead as mentioned by @kushdillip. Commented Nov 22, 2014 at 8:48
  • 14
    The solution based on the alt attribute is very bad and you shouldn't use it, it breaks accessibility.
    – Regnareb
    Commented Oct 17, 2016 at 9:44
  • 14
    Would it be a good idea to recommend a percentage instead of device-dependent pixels? E.g. <img src="drawing.jpg" alt="drawing" width="50%"/> ? Tested it on GitHub, it works nicely Commented Jan 3, 2021 at 20:29
  • 2
    This solution worked for me <img src="miro.medium.com/max/1400/1*bSLNlG7crv-p-m4LVYYk3Q.png" width="450" height="250"> Commented Apr 17, 2021 at 20:42
  • 4
    @JulienColomb alt is always what's displayed as alternative for when the image can't load OR when the user can't see it. It does exactly the same thing. You're thinking of a separate attribute, title which makes hover text. Some browsers, if there's no title supplied, will display the alt text in both places. The accessibility complaint is valid.
    – maco
    Commented Apr 15, 2022 at 13:02
908

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)
23
  • 49
    also note that you cannot have a space after the '='. good:"![](./pic/pic1s.png =250x)", bad:"![](./pic/pic1s.png = 250x)" Commented Jan 21, 2014 at 10:26
  • 96
    Not in the standard, so it doesn't work with every Markdown parser Commented Feb 22, 2014 at 18:53
  • 31
    Doesn't seem to work with Redcarpet, which I use with Jekyll, so I'd go with HTML, as @Tieme answered. If you end up running your Markdown through a parser that likes the standard, the HTML will stand up.
    – user766353
    Commented Feb 27, 2014 at 21:56
  • 12
    doesn't work in Bitbucket wiki as well. it's wrongly converted into the title attribute.
    – RZKY
    Commented Jul 15, 2016 at 12:36
  • 26
    Does not work, but the HTML <img src=http//... width="..." height="..."> works. Commented Jul 20, 2016 at 3:37
508

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" />
8
  • 15
    This worked great for me! Inline CSS wasn't working with GitHub Markdown but the "old school" height/width attributes worked just fine.
    – niczak
    Commented Dec 19, 2014 at 19:53
  • 1
    Good thing is that this one also works if you're trying to use a markdown viewer for local files in a browser extension/add-on.
    – code_dredd
    Commented Mar 23, 2018 at 0:16
  • 8
    Github likes this. Commented May 3, 2018 at 20:50
  • 2
    Note that on Stack Exchange sites you must use this exact format, and no other attributes (note even alt) are seemingly allowed (you may omit width or height, and the space before /> is optional, but other than that no extra whitespace is allowed). GitHub, by contrast, supports (at least) also alt and title attributes, and allows extra whitespace.
    – mklement0
    Commented Jul 9, 2020 at 21:09
  • 3
    On Stack Overflow, the simple solution is to link to a different version of the picture. Each image you upload gets rendered in six different versions, which you can switch between by adding a character to indicate the desired size before the .png extension. For details, see meta.stackoverflow.com/questions/253403/…
    – tripleee
    Commented Oct 30, 2020 at 5:53
220

Just use:

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

instead of:

![](Assets/icon.png)
4
  • 4
    Most Markdown implementations have a modified syntax for this so you don't need to insert the raw HTML tag, but this is the right thing to do if the implementation you're using doesn't have one. Commented Oct 15, 2016 at 22:01
  • 3
    This is compatible in github
    – thanos.a
    Commented Oct 13, 2019 at 17:19
  • Works on Gitlab Commented May 17, 2021 at 8:16
  • Does not work in Jupyter. Commented Apr 18, 2022 at 13:25
179

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. Example markdown

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

  • GitLab
  • Jupyter Notebook
  • StackOverflow
9
  • 5
    Excellent. Works with GitLab Enterprise.
    – Sven Haile
    Commented Apr 27, 2020 at 17:00
  • If I have a markdown link: [myLink]: ./image.png, how can I apply this solution, to avoid duplicate src ? Example: [<img src="[myLink]" width="250"/>](image.png) Commented Sep 30, 2020 at 18:23
  • 1
    @Lwi I'm happy I could help 😊
    – proximab
    Commented May 10, 2021 at 11:06
  • 1
    works with vscode local viewer too Commented Aug 1, 2022 at 10:15
  • 2
    Nice one! :) It works in Obsidian. I used style="display: block; margin: auto; " to even center the image!
    – khaz
    Commented Jan 12 at 0:07
145

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

9
  • 2
    It is even nicer than specifying size in points directly. I am glad this is the approach Pandoc has chosen!
    – jciloa
    Commented May 2, 2017 at 10:08
  • 2
    @m0z4rt GitHub probably does not use PanDoc to render the MarkDown. Commented Nov 17, 2017 at 17:54
  • 3
    @rudolfbyker thank you so much. For Mkdocs-material it worked with adding -attr_list in markdown_extensions```` in mkdocs.yml```.
    – Lilya
    Commented Nov 25, 2020 at 10:27
  • Works for R v. 4.2.0 with tinytex!
    – fitzberg
    Commented Mar 1, 2023 at 9:56
  • Recently Gitlab adopted this format when using rich text editing. @VonC already said it some months ago
    – Bit-Man
    Commented Jul 17, 2023 at 13:46
85

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.

6
  • 11
    May have worked in the past but doesn't work now on Github. Adding an old fashioned <img> tag with width and height still works.
    – mez.pahlan
    Commented Oct 11, 2016 at 15:00
  • 3
    This is the best solution if you're using Kramdown or Jekyll (which uses Kramdown by default). Commented Oct 15, 2016 at 21:35
  • 4
    Block attributes as shown here are a good option with kramdown. The syntax here is slightly wrong, which may be why @piratemurray is having trouble. It should be {: height=36 width=36}; this generates HTML attributes, so it should not have the px suffix. Alternately, you can use css with {: style="height:36px; width:36px"}.
    – Quantum7
    Commented Jan 18, 2018 at 15:10
  • 1
    Works for jekyll! thx. I don't even need height and width, just one is enough. ![alt text](image.png){:height="36px" }
    – Matthias
    Commented Dec 8, 2018 at 10:13
  • 1
    I had to make a small change to get this to work properly in Jekyll. This answer as-written outputs malformed HTML, as the width and height attributes include the "px" part. For me I needed to use {:height="36" width="36"} Commented Dec 22, 2018 at 21:30
52

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

2
  • Works. But using HTML defeats the object of using a simpler than HTML markup language.
    – Martin
    Commented Jul 12, 2023 at 11:54
  • It's NOT working for every markdown implementation. You should specify the particular markdown package in your answer. So the down vote
    – us_david
    Commented Aug 18, 2023 at 15:55
30

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;
}
3
  • 1
    Isn't this the same as Tieme's earlier answer? Commented Feb 16, 2015 at 12:39
  • 29
    This is a misuse of the alt attribute and hurts accessibility.
    – sbuck
    Commented Mar 22, 2016 at 19:32
  • 3
    Yes, it is a hack BUT still seems to be the only thing that works across Markdown flavors. +1 for pointing that out (people using screen readers get problems with that right? They will get also problems with all those not bothering with using alt the right way). Commented Apr 2, 2016 at 19:00
24

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;
}
1
  • 3
    I would recommend against setting the width only in CSS. It is useful to tell the browser how large the image element will be before the image and stylesheet are done loading so that it can optimize the layout of elements around the image without doing a reflow. Commented Oct 15, 2016 at 21:34
22

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.

2
  • 1
    Works perfectly on kramdown+jekyll-3.1.2 as well.
    – C--
    Commented Feb 27, 2016 at 4:28
  • If you don't need to render the image at full width, it's better to put the pixel size directly on the tag (not with CSS). Commented Oct 15, 2016 at 22:02
22

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"

3
  • 5
    This didn't work for me. The reference linked mentions nothing about height/width Commented Jun 19, 2020 at 7:53
  • @ShubhamChaudhary The referenced link shows "what is a reference style image" in Github Flavored Markdown. Maybe you don't have a reference style image or are using another variant of Markdown.
    – zardosht
    Commented Jun 19, 2020 at 8:32
  • 3
    Oh, you linked it to explain 'reference style'. In context of the answer, the link doesn't mention anything about the height/width syntax {height=100px width=100px} Commented Jun 19, 2020 at 8:36
17

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')
```
3
  • 2
    How can I change both height and width? For the first option specifically. I tried putting height and width in the same {} but failed. Separate {}s fail too.
    – NelsonGon
    Commented Dec 3, 2019 at 8:36
  • 2
    @NelsonGon: I never needed to specify both, since the height also scales, when width is specified. Therefore I don't know whether that would be possible and how to achieve it. Good question, though..
    – symbolrush
    Commented Dec 3, 2019 at 9:18
  • 2
    Thanks, I since figured I can do it like so: {height=x width=y}. It seems this syntax does not recognize commas but I could specify other attributes including style elements.
    – NelsonGon
    Commented Dec 3, 2019 at 9:30
17

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

2
  • 1
    Nice. But that's not a universal solution.
    – Martin
    Commented Jul 12, 2023 at 11:49
  • As @Martin has pointed out this isn't a universal solution, but since it's a solution to a common version of this problem I think it's still worth having here.
    – aboy021
    Commented Jul 12, 2023 at 20:46
16

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
16

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: enter image description here

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) 

16

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

1
  • 1
    You cant put markdown inside of HTML, you will need to replace ![chilling](link) with <img src="link" alt="chilling">.
    – LuckyPants
    Commented Sep 16, 2018 at 4:59
15

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>
1
  • 2
    <div><img src="attachment:image.png" width="500" height="300"/></div> <- one line :D
    – Bash Stack
    Commented Nov 17, 2021 at 15:38
13

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.

13

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.

1
13

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

enter image description here

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

1
  • Works. But using HTML defeats the object of using a simpler than HTML markup language.
    – Martin
    Commented Jul 12, 2023 at 11:51
12

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.

9

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!

2
  • THE BEST ANSWER!
    – illuminato
    Commented Apr 22, 2021 at 22:44
  • 1
    In a sea of answers, I thought no one would address this specific case, but MrFun for the win! Commented Sep 26, 2022 at 19:30
8

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.

1
  • 1
    +1, but better just \centering after \begin{figure} or nothing, if you use ` \includegraphics[width=\linewidth]{drawing.jpg}` that I think that should be the default pandoc output at least when the image is wider that the text.
    – Fran
    Commented Oct 24, 2017 at 9:26
6

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}
0
6

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

6

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.

6

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.

6

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%>
5

The addition of relative dimensions to the source URL will be rendered in the majority of Markdown renderers.

We implemented this in Corilla as I think the pattern is one that follows expectations of existing workflows without pushing the user to rely on basic HTML. If your favourite tool doesn't follow a similar pattern it's worth raising a feature request.

Example of syntax:

![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)

Example of kitten:

kitten

1
  • A shame that it doesn't work on GitHub at present, but I'd suggest raising a feature request all the same.
    – davidryan
    Commented Mar 14, 2019 at 6:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.