Resize image in the wiki of GitHub using Markdown

Question

I'm writing a wiki page on GitHub, and I'm using Markdown.

My problem is that I'm putting a large image (this image is in its own repository) and I need resize it.

I have tried different solutions, but they do not work:

![image](http://url.to/image.png "Title" {width=40px height=400px})

![image](http://url.to/image.png = 250x250)

![image](http://url.to/image.png = 250x)

[[http://url.to/image.png = 250x]]

Is there a way to get it?

It is preferable without HTML.

Possible duplicate of [How to change image size Markdown?](https://stackoverflow.com/questions/14675913/how-to-change-image-size-markdown) — Francisco Puga, Jun 28 '17 at 17:50

score 563 · Accepted Answer · edited May 31 '23 at 19:34

563

Updated:

Markdown syntax for images (external/internal):

![test](https://github.com/favicon.ico)

HTML code for sizing images (internal/external):

<img src="https://github.com/favicon.ico" width="48">

Example:

test

Old Answer:

This should work:

~~[[ http://url.to/image.png | height = 100px ]]~~

Source: https://guides.github.com/features/mastering-markdown/

edited May 31 '23 at 19:34

Benjamin Loison

3,782
4
16
33

answered Oct 01 '14 at 09:47

alciregi

5,810
1
12
4

4

Thanks. `` works in READMEs for images uploaded to GitHub. – Sam Dutton Aug 12 '15 at 16:11
@SamDutton: It seems to work fine also for images hosted elsewhere. – Jonik Sep 21 '15 at 09:09
1

Test it today. Github won't recognize the syntax of [](.. =400) or [](... =400px), so if I need to resize the picture, I have to use the syntax. – spikeyang Nov 15 '16 at 08:04
what about a gift – Allen Vork Mar 09 '17 at 06:47
When you replace the markdown syntax with the html, you don't see the correct size in the Github preview. But it does work :) – Julian Mar 29 '17 at 20:00
2

The crossed out answer works if the image is added to the wiki itself. – Eduardo Sep 23 '17 at 21:00
4

What @Eduardo said... The 'Old Answer' that you have crossed out is what I have been scouring the internet for—still works great for relative paths (assets inside the wiki). Additionally, I had to add one or two images inside of a table. The pipe character was giving me grief because of typical table formatting in markdown. Escaping the pipe inside a table cell is still valid: `[[ http://url.to/img.png \| height=48px]]`. – DanMad Jul 11 '18 at 10:10
I wrote [this script](https://gist.github.com/simonbromberg/6781bd9c49691b7fed7185d369d0cff8) which can be added to Automator using a Javascript quick action and then with a keyboard shortcut you can quickly convert the automatically generated Github image markdown with the HTML for easy resizing while the text is selected. I would also recommend [submitting feedback to Github](https://support.github.com/contact/feedback) to get them to simplify this. – shim Aug 14 '20 at 13:54
2

The question clearly asks to resize image using Markdown, so could you provide a method to do it in this way. I searched around internet, but no concrete answer. I don't think this should be an accepted answer. – Rishabh Barman Dec 18 '21 at 11:19

score 89 · Answer 2 · edited Apr 09 '16 at 17:04

89

On GitHub, you can use HTML directly instead of Markdown:

<a href="url"><img src="http://url.to/image.png" align="left" height="48" width="48" ></a>

This should make it.

edited Apr 09 '16 at 17:04

Peter Mortensen

30,738
21
105
131

answered Jun 24 '14 at 10:15

Fritzip

1,207
8
13

17

Thanks for the solution, is it possible without html code? – fhuertas Jun 24 '14 at 13:35
3

Just want to note that you can exclude the `width` so that it can scale the width based on height automatically. – I'm a frog dragon Oct 05 '15 at 05:42
2

Not just on Github; I believe inline HTML is allowed within Markdown in general... – Nicolas Miari Oct 18 '16 at 05:56

stevec · Answer 3 · 2022-05-01T03:01:05.130

Resize by Percentage width=50% height=50%. Example:

<img src="https://i.imgur.com/ZWnhY9T.png" width=50% height=50%>

Resize by Pixels width="150" height="280". Example:

<img src="https://i.imgur.com/ZWnhY9T.png" width="150" height="280">

Some tips

To get a githubusercontent link for an image, drag and drop the image into any issue, and copy/paste the url from the code that is automatically generated. Example code: ![image](https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png)
There is no way to change the size of an image if the markdown format is of the form []() - so stop looking right now! - you must use <img> instead
Another useful summary of conventions that do and don't work here
All of the above is from here

This is also a great TIP. – SARAN SURYA Nov 04 '22 at 04:50 — SARAN SURYA, Nov 04 '22 at 04:50

score 12 · Answer 4 · answered Mar 12 '19 at 22:43

Almost 5 years after only the direct HTML formatting works for images on GitHub and other markdown options still prevent images from loading when specifying some custom sizes even with the wrong dimensions. I prefer to specify the desired width and get the height calculated automatically, for example,

<img src="https://github.com/your_image.png" alt="Your image title" width="250"/>

score 11 · Answer 5 · edited Jan 17 '20 at 05:16

I have used methods described above. Now I am using the method which is a way similiar but more simple to me.

First create add README.md file to your project.
Then upload screenshoots or whatever description images needed to your project main directory.
After uploading image Assets use html to refer these assets directly without using link like below

Like this:

<img src="icon.jpg" width="324" height="324">

<p align="center">
  <img src="screen1.png" width="256" height="455">
  <img src="screen2.png" width="256" height="455">
  <img src="screen3.png" width="256" height="455">
</p>

On above example I have used paragraph to align images side by side. If you are going to use single image just use the code as below

<img src="icon.jpg" width="324" height="324">

Have a nice day!

score 2 · Answer 6 · answered Aug 10 '22 at 05:18

You can tried to put the image into table of markdown, like this:

| ![Kiku](docs/snapshot/home.jpeg)        | ![Kiku](docs/snapshot/sub.jpeg) |
| --------------------------------------- | --------------------------------------- |
| ![Kiku](docs/snapshot/user-center.jpeg) |                                         |

it will make the image layout like grid, but it could not custom for each single image size.

score 1 · Answer 7 · edited Mar 23 '19 at 06:25

1

GitHub Pages now uses kramdown as its markdown engine so you can use the following syntax:

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

http://kramdown.gettalong.org/syntax.html#images

I haven't tested it on GitHub wiki though.

edited Mar 23 '19 at 06:25

user7214865

131
2
6

answered Nov 14 '16 at 21:36

nicobo

573
4
7

3

@nicobo I tried seems it doesn't work for external image ? – user310291 Apr 22 '18 at 19:31
2

This works in GitHib pages using Jekyll, FYI (I realize this isn't precisely the OPs question) – DavidJ Jan 29 '19 at 17:37

denis · Answer 8 · 2019-06-02T09:11:43.977

This addresses the different question, how to get images in gist (as opposed to github) markdown in the first place ?

In December 2015, it seems that only links to files on github.com or cloud.githubusercontent.com or the like work. Steps that worked for me in a gist:

Make a gist, say Mygist.md (and optionally more files)
Go to the "Write Comment" box at the end
Click "Attach files ... by selecting them"; select your local image file
GitHub echos a long long string where it put the image, e.g. ![khan-lasso-squared](https://cloud.githubusercontent.com/assets/1280390/12011119/596fdca4-acc2-11e5-84d0-4878164e04bb.png)
Cut-paste that by hand into your Mygist.md.

But: GitHub people may change this behavior tomorrow, without documenting it.

17

Where is the resize aspect? – koppor Jun 29 '16 at 22:27

Resize image in the wiki of GitHub using Markdown

8 Answers8

Updated:

Old Answer:

Some tips

Linked