How to add Visuals to Github README part 1: Add Screenshots!

Doha Kash
Doha Kash
Dec 2, 2020 · 4 min read

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:

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!

Android in 10 minutes

Android Programming

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store