Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
image resize in github flavored markdown.

Image source

https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

Try resize it!

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100)

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png =250x250)

  • ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png)

    • Copy <img> in browser DevTools. Replace ![](url) to <img>. Add width(and height) attr.
    • <img src="https://camo.githubusercontent.com/..." data-canonical-src="https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png" width="200" height="400" />

Other information

@mehdi-S

This comment has been minimized.

Copy link

@mehdi-S mehdi-S commented Jul 26, 2016

suggest you to change image in you exemple since they are not found now and your exemple is show everywhere in google search for image size github markdown

@nipgrnc104

This comment has been minimized.

Copy link

@nipgrnc104 nipgrnc104 commented Sep 20, 2016

the method doesnt work dude

@sooorajjj

This comment has been minimized.

Copy link

@sooorajjj sooorajjj commented Sep 22, 2016

@nipgrnc104

Github doesn't apply the style attribute but obeys the width and height. So for github you can use the following HTML tag directly in the markdown:

<img src="url" alt="alt text" width="whatever" height="whatever">

@gurdiga

This comment has been minimized.

Copy link

@gurdiga gurdiga commented Jan 23, 2017

👍

@Neebulo

This comment has been minimized.

Copy link

@Neebulo Neebulo commented May 9, 2017

Still getting Content length exceeded
<img width="200" alt="portfolio_view" src="https://tinyurl.com/n4gtql8">

@arganzheng

This comment has been minimized.

Copy link

@arganzheng arganzheng commented May 16, 2017

If you are using kramdown, try this:

![test image size](/img/post-bg-2015.jpg){:class="img-responsive"}
![test image size](/img/post-bg-2015.jpg){:height="50%" width="50%"}
![test image size](/img/post-bg-2015.jpg){:height="700px" width="400px"}
@trojette

This comment has been minimized.

Copy link

@trojette trojette commented May 23, 2017

arganzheng's suggestion worked for me. Thanks a lot.

@Zak-Kent

This comment has been minimized.

Copy link

@Zak-Kent Zak-Kent commented Jun 11, 2017

arganzheng's trick works 👍 Thank you!

@dideler

This comment has been minimized.

Copy link

@dideler dideler commented Aug 18, 2017

Note that if you're using an image hosted on GitHub, you can resize using the s query param, e.g. s=200

![](https://avatars3.githubusercontent.com/u/31112269?v=4&s=200)

@seansio1995

This comment has been minimized.

Copy link

@seansio1995 seansio1995 commented Aug 26, 2017

It works, thx

@consbulaquena

This comment has been minimized.

Copy link

@consbulaquena consbulaquena commented Sep 16, 2017

arganzheng doesn't work

@consbulaquena

This comment has been minimized.

Copy link

@consbulaquena consbulaquena commented Sep 16, 2017

This worked in README
Image hosted on GitHub placed in
<img src="https://cloud.githubusercontent.com/assets/yourgif.gif" width="400" height="790">

@MichaelPolla

This comment has been minimized.

Copy link

@MichaelPolla MichaelPolla commented Oct 14, 2017

@consbulaquena thanks ! it also works in issue comments.
When adding/editing a comment :

  • upload picture by drag-and-drop in the text field
  • replace ![image](https://your-image-url.type) with <img src="https://your-image-url.type" width="100" height="100">
@javierjops

This comment has been minimized.

Copy link

@javierjops javierjops commented Oct 31, 2017

@kaecy

This comment has been minimized.

Copy link

@kaecy kaecy commented Dec 19, 2017

Doesn't work. Don't want to use HTML. Should be readable to humans without having to analyse the code.

@johndeighan

This comment has been minimized.

Copy link

@johndeighan johndeighan commented Feb 5, 2018

The problem that I'm having is that when including an image in README.md as ![basic CRUD](BasicCrud.png), with the image file in the same directory, the displayed README file is expanding the image to the width of the screen. I don't want it to scale the image at all! Really, why would it do that by default? I also would prefer to not use HTML (though if that's the only solution, I'll do that). Furthermore, I'll eventually include a lot of images - it would be a pain to have to look up the size of each and use an explicit size in README.md

@riyak1998

This comment has been minimized.

Copy link

@riyak1998 riyak1998 commented Mar 2, 2018

None of the above tricks work. Plus I don't wanna use HTML tags. Isn't there any MARKDOWN syntax for resizing the image?

@Hadlock

This comment has been minimized.

Copy link

@Hadlock Hadlock commented Mar 14, 2018

This is one of the top search results for this topic Here is Github's markdown doco, does not mention image size when using straight markdown:
https://github.github.com/gfm/#images

Someone has a github readme previewer, here:
https://github.com/joeyespo/grip

Also of note, github uses kramdown as their md engine, but ONLY for their pages site, readme is rendered differently (see repo above)

@2017develper

This comment has been minimized.

Copy link

@2017develper 2017develper commented Mar 22, 2018

i want to down scale an image into 2^(-3)
anyone can help me please

@CarolynWriter

This comment has been minimized.

Copy link

@CarolynWriter CarolynWriter commented Mar 28, 2018

Question: If you do resize an image with explicit values, what happens when the image is viewed on mobile, etc. Does it automatically resize? In other words, are there any ways to use relative values for images?

@zapjonny

This comment has been minimized.

Copy link

@zapjonny zapjonny commented Jul 10, 2018

Does not work. Why does this show up in Google?

@andriannp

This comment has been minimized.

Copy link

@andriannp andriannp commented Jul 19, 2018

how to use image from github repository?

@SPurno

This comment has been minimized.

Copy link

@SPurno SPurno commented Oct 25, 2018

Note that if you're using an image hosted on GitHub, you can resize using the s query param, e.g. s=200

![](https://avatars3.githubusercontent.com/u/31112269?v=4&s=200)

Its showing square image. I want to set height and width, so far what can I do now ?

@r3lik

This comment has been minimized.

Copy link

@r3lik r3lik commented Nov 19, 2018

doesn't work

@asifsha

This comment has been minimized.

Copy link

@asifsha asifsha commented Nov 28, 2018

Below worked for me, but make sure you use raw Url if your images are on github repo, like https://raw.githubusercontent.com/
<img src="https://your-image-url.type" width="100" height="100">
demo: https://asifsha.github.io/

@Incrementis

This comment has been minimized.

Copy link

@Incrementis Incrementis commented Feb 9, 2019

Don`t work for me.
I tried it within one of my Github Wikis.

@HeZhang1994

This comment has been minimized.

Copy link

@HeZhang1994 HeZhang1994 commented Mar 14, 2019

consbulaquena's solution works for me, thanks a lot!

@mccrudd3n

This comment has been minimized.

Copy link

@mccrudd3n mccrudd3n commented Apr 17, 2019

I see that everything here has been resizing, How can we rotate an image?

@Slion

This comment has been minimized.

Copy link

@Slion Slion commented May 19, 2019

Only HTML worked for me. Sadly that means the syntax is pretty heavy especially if you want a link to the full size image.
<a href="https://your-image-url.type"><img src="https://your-image-url.type" width="100" height="100"/></a>

@loudwinston

This comment has been minimized.

Copy link

@loudwinston loudwinston commented Jun 18, 2019

HTML syntax worked great. Not that much more complicated than existing markup. You only need to set the width, the image tag will automatically set the height for you to keep the right aspect ratio

<img src="https://your-image-url.type" width="300">
@irixce

This comment has been minimized.

Copy link

@irixce irixce commented Jun 30, 2019

HTML syntax worked for me, but I wonder if anyone will have success with this:

Ex.

{:refdef: style="width: 10px; height: 10px"}
[![Octocat](https://github.githubassets.com/images/icons/emoji/octocat.png)](./somelink)
{: refdef}

It effectively resized the image to smaller dimensions, but it wasn't responsive for all inputs.

@pprathameshmore

This comment has been minimized.

Copy link

@pprathameshmore pprathameshmore commented Jul 31, 2019

Doesn't work.

@kyle30312

This comment has been minimized.

Copy link

@kyle30312 kyle30312 commented Sep 6, 2019

For GitHub wiki pages, this syntax works: (remember the px)
[[https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png|width=100px]]

@jacobussystems

This comment has been minimized.

Copy link

@jacobussystems jacobussystems commented Sep 17, 2019

This works for me in a Wiki, where the image file has been uploaded with the .md file:

[[bridge.png | width=100px | alt=Bridge]]

It didn't work with just 'width=100', needed the 'px' as well.

@Whizkevina

This comment has been minimized.

Copy link

@Whizkevina Whizkevina commented Oct 10, 2019

Using the Img tag <img src="" width="" />, works for me.

@ABHISHEK-AMRUTE

This comment has been minimized.

Copy link

@ABHISHEK-AMRUTE ABHISHEK-AMRUTE commented Dec 25, 2019

@consbulaquena thanks! it worked for me.

@mayeaux

This comment has been minimized.

Copy link

@mayeaux mayeaux commented Dec 31, 2019

WRONG you should take this down!

@vatnid

This comment has been minimized.

Copy link

@vatnid vatnid commented Apr 24, 2020

Doesn't work.

@saumil27

This comment has been minimized.

Copy link

@saumil27 saumil27 commented May 19, 2020

Thank you consbulaquena.

@vvitsenets

This comment has been minimized.

Copy link

@vvitsenets vvitsenets commented Jun 25, 2020

tnx

@stevecondylios

This comment has been minimized.

Copy link

@stevecondylios stevecondylios commented Jul 15, 2020

I made an up to date version "How to Resize an Image in Github Flavored Markdown in 2020 (and beyond)!"

https://gist.github.com/stevecondylios/dcadb4fc73e63f27a3bbcf17e52058bf#how-to-resize-an-image-in-github-flavored-markdown-in-2020-and-beyond

@rickware

This comment has been minimized.

Copy link

@rickware rickware commented Jul 25, 2020

I made an up to date version "How to Resize an Image in Github Flavored Markdown in 2020 (and beyond)!"

https://gist.github.com/stevecondylios/dcadb4fc73e63f27a3bbcf17e52058bf#how-to-resize-an-image-in-github-flavored-markdown-in-2020-and-beyond

Fine! Thank You.

@IsuruSudasinghe

This comment has been minimized.

Copy link

@IsuruSudasinghe IsuruSudasinghe commented Jul 26, 2020

@consbulaquena method worked for me. Thanks

@thevickypedia

This comment has been minimized.

Copy link

@thevickypedia thevickypedia commented Jul 29, 2020

<img src="image_url" width="some_width" height="some_height" alt="some_text">

this worked for me 👍

@Fylls

This comment has been minimized.

Copy link

@Fylls Fylls commented Aug 4, 2020

strangely i can the whole design in the README.md but in my profile i cannot see any images

@Fylls

This comment has been minimized.

Copy link

@Fylls Fylls commented Aug 4, 2020

strangely i can the whole design in the README.md but in my profile i cannot see any images

I am using these tags and linking them to files in a folder in my repo
< img src="gifs/name.gif" width="1000px"/ >

@stevecondylios

This comment has been minimized.

Copy link

@stevecondylios stevecondylios commented Aug 4, 2020

@Fylls I had the same experience. There is a bug atm (I know because I emailed github). For some reason, my image would appear, but if it was too large, it wouldn't. (see here). The workaround is to use a certain kind of githubusercontent url, like so

![](https://user-images.githubusercontent.com/12915136/87480122-ab9e5e00-c5fa-11ea-82b1-b4d3340b5c27.png)
@SauravMaheshkar

This comment has been minimized.

Copy link

@SauravMaheshkar SauravMaheshkar commented Sep 30, 2020

@consbulaquena thanks! it also works in issue comments.
When adding/editing a comment :

  • upload picture by drag-and-drop in the text field
  • replace ![image](https://your-image-url.type) with <img src="https://your-image-url.type" width="100" height="100">

Thanks this worked for me

@andry81

This comment has been minimized.

Copy link

@andry81 andry81 commented Oct 29, 2020

The github does not respect anymore the width parameter greater than a particular value relative to the width of the browser window and down scale it for any image to the width of the document. For mine case I could not freeze the width in the 1024 pixels. 😞

@Neon22

This comment has been minimized.

Copy link

@Neon22 Neon22 commented Dec 7, 2020

For GitHub wiki pages, this syntax works: (remember the px)
[[https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png|width=100px]]

This worked for me.
The manual image tool made an entry like this:
![text](link) this showed an image which was the original image size.
I changed it to this:
[[link|width=400px]] which showed an image 400px across.

my link was an image in the github repo and I used the url format that looks like this:
https://raw.githubusercontent.com/user...

It correctly resized the image on the wiki page.

@gerroon

This comment has been minimized.

Copy link

@gerroon gerroon commented Dec 14, 2020

markdown is a piece of shit hyped format and this page is a proof of it.

@andry81

This comment has been minimized.

Copy link

@andry81 andry81 commented Dec 14, 2020

markdown is a piece of shit hyped format and this page is a proof of it.

Actually, software developers turned to smart phone users and made all images downscale for the sake of usage in the poor width devices. Here is nothing to do with the markdown format together with all others formats which suffers from the same issue. So users of smart phone is a "piece of shit hyped format". Not the markdown fault.

@gerroon

This comment has been minimized.

Copy link

@gerroon gerroon commented Dec 14, 2020

markdown is a piece of shit hyped format and this page is a proof of it.

Actually, software developers turned to smart phone users and made all images downscale for the sake of usage in the poor width devices. Here is nothing to do with the markdown format together with all others formats which suffers from the same issue. So users of smart phone is a "piece of shit hyped format". Not the markdown fault.

Yes, proliferation of the markdown flavors is a testament of the underlying issue. It does not solve any problem and makes it very confusing plus now moving between so called flavors is pain in the butt unless you write purely text content.

Favorite developer question at new year parties, "Which markdown flavor do you like?"

@Galaxy-Coding

This comment has been minimized.

Copy link

@Galaxy-Coding Galaxy-Coding commented Dec 15, 2020

markdown is a piece of shit hyped format and this page is a proof of it.

Actually, software developers turned to smart phone users and made all images downscale for the sake of usage in the poor width devices. Here is nothing to do with the markdown format together with all others formats which suffers from the same issue. So users of smart phone is a "piece of shit hyped format". Not the markdown fault.

Yes, proliferation of the markdown flavors is a testament of the underlying issue. It does not solve any problem and makes it very confusing plus now moving between so called flavors is pain in the butt unless you write purely text content.

Favorite developer question at new year parties, "Which markdown flavor do you like?"

also, how is the github dark mode is a great conversation starter

@karimamd

This comment has been minimized.

Copy link

@karimamd karimamd commented Jan 17, 2021

the html trick worked for me

@ernestoz1

This comment has been minimized.

Copy link

@ernestoz1 ernestoz1 commented Jan 25, 2021

Thanks

@rdsserrao

This comment has been minimized.

Copy link

@rdsserrao rdsserrao commented Jan 26, 2021

Thanks guys, it also worked for me.
After getting the URL from pasting the image in the "Issues" tab, i pasted it on the readme file and replaced:
![image](https://your-image-url.type) with <img src="https://your-image-url.type" width="600">

@surendar9

This comment has been minimized.

Copy link

@surendar9 surendar9 commented Feb 3, 2021

Duplicate the image could be one possible solution for this .
For example your image file is : ![site name](image.png) then add, [![site name](image.png)](image.png)

@marc-oclock

This comment has been minimized.

Copy link

@marc-oclock marc-oclock commented Feb 4, 2021

perfect with <img> tag 😄
the only solution that works for me (image from a copy/paste on Github)

@Ab-Abdurrahman

This comment has been minimized.

Copy link

@Ab-Abdurrahman Ab-Abdurrahman commented Feb 6, 2021

@consbulaquena thanks ! it also works in issue comments.
When adding/editing a comment :

  • upload picture by drag-and-drop in the text field
  • replace ![image](https://your-image-url.type) with <img src="https://your-image-url.type" width="100" height="100">

Thanks to @consbulaquena & @MichaelPolla this worked in my case.

@Yuzeyang

This comment has been minimized.

Copy link

@Yuzeyang Yuzeyang commented Feb 21, 2021

@consbulaquena thanks! it also works in issue comments.
When adding/editing a comment :

  • upload picture by drag-and-drop in the text field
  • replace ![image](https://your-image-url.type) with <img src="https://your-image-url.type" width="100" height="100">

It works!

@baneeishaque2

This comment has been minimized.

Copy link

@baneeishaque2 baneeishaque2 commented Mar 18, 2021

@nipgrnc104

Github doesn't apply the style attribute but obeys the width and height. So for github you can use the following HTML tag directly in the markdown:

<img src="url" alt="alt text" width="whatever" height="whatever">

Working...

@W01fw00d

This comment has been minimized.

Copy link

@W01fw00d W01fw00d commented Apr 14, 2021

Thanks!

@iphearum

This comment has been minimized.

Copy link

@iphearum iphearum commented Apr 22, 2021

Apply style to image, plz try this
my css style

img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}
img[title="thumbnail"] {
   width:200px;
}
img[alt$="-thumbnail"]{
    width:300px;
}

my coding style

![img](link#thumbnail) <!-- src = link#thumbnail -->
![img](link "thumbnail") <!-- title = thumbnail -->
![img -thumbnail](link) <!-- alt = img -thumbnail -->
@1pavanb

This comment has been minimized.

Copy link

@1pavanb 1pavanb commented Apr 22, 2021

image

@labouz

This comment has been minimized.

Copy link

@labouz labouz commented May 6, 2021

For GitHub wiki pages, this syntax works: (remember the px)
[[https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png|width=100px]]

This did it!! I forgot the "px". thanks @kyle30312

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment