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

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.