Skip to content

Instantly share code, notes, and snippets.

Last active July 11, 2024 16:08
Show Gist options
  • Save uupaa/f77d2bcf4dc7a294d109 to your computer and use it in GitHub Desktop.
Save uupaa/f77d2bcf4dc7a294d109 to your computer and use it in GitHub Desktop.
image resize in github flavored markdown.

Image source

Try resize it!

  • ![]( | width=100)

  • ![]( =250x250)

  • ![](

    • Copy <img> in browser DevTools. Replace ![](url) to <img>. Add width(and height) attr.
    • <img src="" data-canonical-src="" width="200" height="400" />

Other information

Copy link

sebaptcd commented Jan 3, 2023

Great info, worked for me!

Copy link

SuayMack commented Jan 5, 2023

Thank You!

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

Copy link

asgar72 commented Jun 7, 2023

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


Thanks bro that's worked

Copy link

thanks brdr

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.

Copy link


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.

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.

Copy link

The style attribute gets stripped out...

Copy link

dafurman commented Apr 9, 2024

I found myself referring to this gist a lot over the years for the sake of reducing the size of gigantic images when I put them in PR descriptions, so I've turned this into a simple Shortcut:

Copy link

When you upload or copy/paste a raw image, github markdown will put in the rendered img tag the style max-width: 100%, so, it's mandatory to add the width and the height attributes for the img tag, any other thing will be removed by the renderer, so, only replacing the markdown with the img html tag adding the width and height will work.

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