Skip to content

Instantly share code, notes, and snippets.

@stevecondylios

stevecondylios/resize-image-in-github-issue-github-flavored-markdown.md

Last active November 13, 2025 19:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stevecondylios/dcadb4fc73e63f27a3bbcf17e52058bf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stevecondylios/dcadb4fc73e63f27a3bbcf17e52058bf to your computer and use it in GitHub Desktop.
Download ZIP
How to Resize an Image in a Github Issue (e.g. Github flavored Markdown)
Raw
resize-image-in-github-issue-github-flavored-markdown.md

When you paste from your clipboard into a github issue, it will give you something like this:

![image](https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png)

To Resize the Image

Simply change to either of these formats:

For percentage size change

<img src="https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png" width=50% height=50%>

For fixed size (pixels)

<img src="https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png" width="150" height="280">

@alirezaismyname
Copy link

alirezaismyname commented May 31, 2021

Thank you so much!

@mfaccin
Copy link

mfaccin commented Jun 11, 2021

thank you so much! did you find any external tool for convert automatically?

@daedroza
Copy link

daedroza commented Aug 1, 2021 •
edited
Loading

@daedroza
Copy link

daedroza commented Aug 1, 2021

this shit works

@TechTouhid
Copy link

TechTouhid commented Aug 12, 2021

yeah man, it's working. Thanks

@junguler
Copy link

junguler commented Sep 7, 2021

amazing, thank you

@iAmKankan
Copy link

iAmKankan commented Sep 27, 2021

It works, thanks a lot man

@Ankit-Laddha
Copy link

Ankit-Laddha commented Oct 15, 2021

if you still want to use ![]() and resize the image, you can wrap this in an div element:

<div style="width: 60%; height: 60%">
  
  ![](.images/sample.png)
  
</div>

@sulemansayyed
Copy link

sulemansayyed commented Oct 22, 2021

if you still want to use ![]() and resize the image, you can wrap this in an div element:

<div style="width: 60%; height: 60%">
  
  ![](.images/sample.png)
  
</div>

I tried it but this didn't work.

@itbj
Copy link

itbj commented Dec 27, 2021

Thank you so much!

@Ankit-Laddha
Copy link

Ankit-Laddha commented Dec 27, 2021

@sulemansayyed what happens in your case?
https://gist.github.com/stevecondylios/dcadb4fc73e63f27a3bbcf17e52058bf#gistcomment-3935686

@amakedonas
Copy link

amakedonas commented Jan 14, 2022

very useful thanks ;)

@Robcaze1980
Copy link

Robcaze1980 commented Mar 17, 2022

Wow.....great! Thanks.

@MarvinXu
Copy link

MarvinXu commented Apr 9, 2022 •
edited
Loading

Revise: Sorry, I tested some more, it only works for certain files, which I haven't figured out why!

A Maybe useful Tip:

Copy image from clipboard generates this, which is 100% width by default.

![image](https://user-images.githubusercontent.com/7382357/162556298-6122d82c-671e-42d7-85c2-a7b8066130ac.png)

Copy image from file generates this, which contains the actual image width and filename!

<img width="322" alt="2022-04-09_122409" src="https://user-images.githubusercontent.com/7382357/162556478-61a0ff1c-aaba-48ff-9d1b-e9adfb30e6ac.png">

@OrcunSamiTandogan
Copy link

OrcunSamiTandogan commented Jun 7, 2022

Thank you

@MemoonaTahira
Copy link

MemoonaTahira commented Oct 8, 2022 •
edited
Loading

Please is there a way to resize images we dragged and dropped into the read me in October 2022 now? I didn't know they couldn't be resized, and my readme page looks so messy >-<

@OrcunSamiTandogan
Copy link

OrcunSamiTandogan commented Oct 9, 2022

Please is there a way to resize images we dragged and dropped into the read me in October 2022 now? I didn't know they couldn't be resized, and my readme page looks so messy >-<

Dont they are fixed when you change these: width=50% height=50%>`? Just update new file and change these log, maybe that helps?

@MemoonaTahira
Copy link

MemoonaTahira commented Oct 12, 2022

Thank you for the reply. Yes that works, but unfortunately that is only for images I upload myself, not drag and drop images that are hosted somewhere on github-user content URLs. While creating an installation guide, I used a lot of pictures and it would take a lot of time to first save the screenshots and then upload them. It would be great to have a way to resize them too.

@MemoonaTahira
Copy link

MemoonaTahira commented Oct 12, 2022 •
edited
Loading

yuriy-mlcn-VVQeCl_Xe6g-unsplash

This is a sample image that I dragged and dropped here. It's URL is: https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg. I know it wasn't possible in 2020, but in 2022 maybe?

@stevecondylios
Copy link
Author

stevecondylios commented Oct 12, 2022

@MemoonaTahira I think what you're asking is whether it's possible to resize an image that uses this syntax:

![image](https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg)

Unfortunately the answer is still no.

The only thing you can do is convert it to this syntax:

<img src="https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg">

Which allows you to resize it using percent or pixels:

<img src="https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg" width=20% height=20%>

<img src="https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg" width=100px height=100px>

@MemoonaTahira
Copy link

MemoonaTahira commented Oct 13, 2022 •
edited
Loading

Sadly for drag&drop images which are hosted on githubusercontent, this doesn't work. Thank you for getting back to me.

@stevecondylios
Copy link
Author

stevecondylios commented Oct 14, 2022

@MemoonaTahira

Here are a few examples showing how to change the size of your githubusercontent image:

Original:

<img src="https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg">

20% height and width

<img src="https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg" width=20% height=20%>

40% height and width

<img src="https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg" width=40% height=40%>

100px height and width

<img src="https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg" width=100px height=100px>

200px height and width

<img src="https://user-images.githubusercontent.com/41547742/195372022-4e48d086-7af3-4f5a-a871-72522f3bde9b.jpg" width=200px height=200px>

@MemoonaTahira
Copy link

MemoonaTahira commented Oct 16, 2022

I tried. The exact same thing like about a week ago, but it didn't work on some images. I might be doing something wrong. I'll double check. Not sure if it might be the image extension (my images were png) and this ones jpg. Thank you!

@jonchui
Copy link

jonchui commented Nov 12, 2022

If anyone knows of a very easy to use (preferably browser based, client side) app that converts a link an image in a repository to a githubusercontent/raw link, please comment with the app url

I 100% agree! I use loom (CMD+SHIFT+2) shortcut to create a link from clipboard.. but i'd love a tool that does that w/ github!

Then I can create image links and put them directly into the commit messages while working in terminal

@tadyen
Copy link

tadyen commented Jan 29, 2023 •
edited
Loading

Thanks! I'm not led down a wild goosechase anymore

no way to change the size of an image if the markdown format is of the form []()

However it's still unfortunate that such is the case. The reason I even explored this topic was because using the <img src="" width=""> tag causes the images to not scale properly on small screens (eg mobile) or windows.

Kinda defeats the notion of markdown if I have to markup stuff to get it to work right, otherwise my images will have to be full-size.

@iAmKankan
Copy link

iAmKankan commented Jan 29, 2023 •
edited
Loading

for me in github <img> is more convenient than ![]().
This is I frequently use while working with pictures, the best part is that picture captions is easy to add

<p align="center">
  <img src="https://user-images.githubusercontent.com/12748752/167583923-c90411f4-8b57-4663-93fa-be18ca47a7cb.png" width=45% /> <img src="https://user-images.githubusercontent.com/12748752/167583928-bfe56750-9917-4209-9eb5-04fc81743647.png" width=45% /> 
  <br>
  <img src="https://user-images.githubusercontent.com/12748752/167583932-9d195974-375c-48a6-84db-04fdbcb5fb6b.png" width=45% />
<br>
<ins><b><i> Activation functions and NN</i></b></ins>
</p>

@kissu
Copy link

kissu commented Jul 9, 2024

Wish GitHub would generate something simple with a prefix like StackOverflow does for us already.

@SirYodaJedi
Copy link

SirYodaJedi commented Aug 1, 2024 •
edited
Loading

My oversized phone pictures in yquake2/yquake2#1130 are ending up with a private-user-images.githubusercontent.com url, which requires a unique access token. I ended up having to use <details> to collapse it, since <img> wouldn't work.

@prototyperspective
Copy link

prototyperspective commented Nov 4, 2024

This info is missing here.

@jessik126
Copy link

jessik126 commented Nov 13, 2025

Thanks @MarvinXu , you helped me a lot !!

What I'm doing: after pasting the image directly on GitHub, I just replaced the ![image]( part before the link to <img width="30%" src= part.

For exemple:

  • from: ![image](https://github.com/user-attachments/assets/00)
  • to: <img width="30%" src=https://github.com/user-attachments/assets/00>

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