Skip to content

Instantly share code, notes, and snippets.

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

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

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

@dafurman
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:
https://www.icloud.com/shortcuts/7415f6fa654144479bf5e965701c8838

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