Skip to content

Instantly share code, notes, and snippets.

@uupaa
Last active October 7, 2024 23:04
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

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

@mjbear
Copy link

mjbear commented Aug 12, 2024

alt{: width="50%"}

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

The syntax for images with a specified width has changed over time.

HTML image tags are the way to go

@AndrianD
Copy link

height="450px" works for me. Thanks!

@mahendranv
Copy link

Just throwing in the Obsidian's image format

![[<url>|400]]

// Here 400 is the width

@AndrianD
Copy link

@mahendranv : Can you give an example with full syntax since your example doesn't work? Thanks

@mjbear
Copy link

mjbear commented Oct 2, 2024

@uupaa
I couldn't get any of the suggestions to function on GitHub.

img tags work fine though.

<img src="https://media1.tenor.com/m/ofDuH0hvGh8AAAAd/so-what-do-you-think.gif" width="200" title="Ray Romano saying What do you think?" alt="Ray Romano saying What do you think?"/>

Ray Romano saying What do you think?

@rahaaatul
Copy link

can we round the image border?

@mjbear
Copy link

mjbear commented Oct 7, 2024

can we round the image border?

@rahaaatul
It appears not.
I tried to use CSS styles via Preview, but they're stripped off.
Plus the official statement from the markup repo (as seen below).

Note

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes.

reference: https://github.com/github/markup

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