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

@gerroon
Copy link

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
Copy link

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
Copy link

the html trick worked for me

@ernestoz1
Copy link

Thanks

@rdsserrao
Copy link

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
Copy link

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
Copy link

marc-oclock commented Feb 4, 2021

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

@burhr2
Copy link

burhr2 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
Copy link

@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
Copy link

@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
Copy link

Thanks!

@iphearum
Copy link

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
Copy link

1pavanb commented Apr 22, 2021

image

@labouz
Copy link

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

@Tanya1902
Copy link

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

this works easily

@krystian3w
Copy link

krystian3w commented May 24, 2021

The "best" works html <img> and legacy attribs width +/- height (https://gist.github.com/uupaa/f77d2bcf4dc7a294d109#gistcomment-1880104).

On discourse forums (like https://meta.discourse.org/) possible use:

![img|320x271](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png)

also

![img|320x271,50%](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png)

@englianhu
Copy link

<img src='figure/rstudio.png' width='25'>
<img src='figure/anaconda.png' width='25'>
<img src='figure/jupyterlab.png' width='25'>

2021-05-25_23-29

@arq0017
Copy link

arq0017 commented May 30, 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">

worked for me

@Ghassanee
Copy link

<img src="https://cloud.githubusercontent.com/assets/yourgif.gif" width="400" height="790">

worked, Thanks!

@AliyahMillan
Copy link

@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

Thanks, this also worked for me.

@wangpin34
Copy link

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

Works for me. Thanks

@wakoliVotes
Copy link

@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

Thanks, this also worked for me.

Thank you a lot, after trying severally, it worked. I almost gave up. The replace aspect was what I was missing.

@martinKindall
Copy link

@danny-votez thank you, worked for me too, in Github.

@itbj
Copy link

itbj commented Dec 27, 2021

👍

@shakiz
Copy link

shakiz commented Mar 10, 2022

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

this works easily

Yeah!! This works easily! Thanks.

@vinirossa
Copy link

for me, I need to remove the "px" in order to get it to work ;)

@arlenyvalle
Copy link

arlenyvalle commented Jun 22, 2022

@dirkk0
Copy link

dirkk0 commented Aug 17, 2022

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

awesome, thanks @iphearum !

@machinemac
Copy link

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

That is really helpfull my man, ty

@GuillermoFidalgo
Copy link

This worked for me.
I'm using this for a jekyll site.

![alt](image.png){: width="50%"}

@rnag
Copy link

rnag commented Dec 25, 2022

@GuillermoFidalgo thanks, you my hero 😺

work for me in a jekyll scenario as well.

@stravid87
Copy link

Thank You!
(used the img tag trick)

@andry81
Copy link

andry81 commented Dec 29, 2022

![alt](image.png){: width="50%"}

Still does not work in github repo readme. The {: width="50%"} part just does ignore.

@rnag
Copy link

rnag commented Dec 30, 2022

@andry81 from what I understand that's just for building static sites with jekyll - i.e. with github pages or similar

@sebaptcd
Copy link

sebaptcd commented Jan 3, 2023

Great info, worked for me!

@SuayMack
Copy link

SuayMack commented Jan 5, 2023

Thank You!

@gforien
Copy link

gforien commented Jan 11, 2023

Thank you !!
![img|500](https://image.png) worked for me in Obsidian

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