How to Resize an Image in a Github Issue (e.g. Github flavored Markdown)

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

How to Resize an Image in Github README.md (i.e. Github Flavored Markdown)

Percentage:

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

Pixels:

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

Quick tips!

• To get a githubusercontent link for an image, drag and drop the image into any issue, and copy/paste the url from the code that is automatically generated. Example code: ![image](https://user-images.githubusercontent.com/16319829/81180309-2b51f000-8fee-11ea-8a78-ddfe8c3412a7.png)

• 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

• There is no way to change the size of an image if the markdown format is of the form []() - so stop looking right now! - you must use <img> instead

• Another useful summary of conventions that do and don't work here

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>

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.

Thank you so much!

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

very useful thanks ;)

Wow.....great! Thanks.

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.


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

Thank you

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

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?

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.

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?

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

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

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

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!

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

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.

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>

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

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.

This info is missing here.