I remember when I first started learning to program and had to upload my first project on Github, I wanted to add screenshots of my app to the README section. I kept on searching the internet, and I actually found a way that was suggested by some to store your images in your git repo and then refer to them, but this option would take a lot of steps for every screenshot and was kind of overwhelming for me. That’s why I decided to write this article to show you how to add a screenshot to your Github READMe.
Use Imgur as an External Free Cloud Hosting Website
I have found this way to add a screenshot to Github README. First, I would upload the screenshot image to my account on Imgur website. For those of you who don’t know Imgur:
Imgur is an American online image sharing community and image host. The service has been popular with hosting viral images and memes, particularly those posted on Reddit.
So here is Imgur link if you want to check it out:
Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with…
You go to Imgur and create an account. Then after signing up, you will be redirected to a page like this shown below.
Then right click on your account image and you’ll be presented with the shown menu.
Click on images and you’ll be directed to the following page where you can add your own images. Click on “add images” and then browse your image from your device or paste the image url.
Now all the images you have uploaded will appear in this section.
Click on the image you’ve just uploaded and copy the “Direct link”, the second link with .png at the end.
Go back to Github, open the README.md section and paste the following markdown in your post including the url you’ve just copied. Make sure you specify the width like giving it a value of 300 or so, or the screenshot will be huge!
<img src="https://i.imgur.com/k4ZYqy7.png" width="300">
And Voila here is the README.md file with the screenshot added:
What if I want to include 3 screenshots in one row?
If you want to include more than one screenshot in the same row you just write the markdown in your post as following:
<img src="https://i.imgur.com/f4Mt6hA.png" width="300"> <img src="https://i.imgur.com/DAZDQGX.png" width="300"> <img src="https://i.imgur.com/ComMcQE.png" width="300">
This will add three screenshots into one row as shown below:
And this is how we can easily add screenshots to the Github README.md file. If you want to know how to add GIFs to Github ReadMe.md, then stay tuned for the second part of this series where I will show you how to add GIFs to Github README.md. That’s all for now and have a nice day!