Skip to content

Instantly share code, notes, and snippets.

@uupaa
Last active February 23, 2024 13:58
Star You must be signed in to star a gist
Save uupaa/f77d2bcf4dc7a294d109 to your computer and use it in GitHub Desktop.
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

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

@ericthemarques
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 !!
![alt|500](https://image.png) or simply ![|500](https://image.png) worked for me in Obsidian

@asgar72
Copy link

asgar72 commented Jun 7, 2023

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

Thanks bro that's worked

@iamamanporwal
Copy link

thanks brdr

@dideler
Copy link

dideler commented Sep 5, 2023

Everyone, please just use the HTML img tag with src and width attributes. Bonus if using alt and title for accessibility.

It is simple, understandable, works in every Markdown engine, and is practically what Markdown's ![]() compiles to.

@Jackiexiao
Copy link

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

@igorskyflyer
Copy link

But anybody knows how to make them responsive? I applied both width and height in my profile's README and it works great on my desktop but looks so bad on my phone.

Yes, I could just take out the height attribute but you actually need them both to avoid CLS -cumulative layout shift, which is why I added the attributes to begin with.

@dirkk0
Copy link

dirkk0 commented Oct 11, 2023

@igorskyflyer not sure if you can inject css files, but if you can, you could try css variables with media queries.

@igorskyflyer
Copy link

The style attribute gets stripped out...

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