How to add images to GitHub readme
I remember when I first started learning to code and had to upload my first project to Github, I wanted to add images or 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 developers 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 image and was kind of overwhelming for me. That’s why I decided to write this article to show you how to add images to your GitHub readme.
Use Imgur as an External Free Cloud Hosting Website
I have found this way to add images to the 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 redirected 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.
Use Markdown Syntax to add the image url to the GitHub readme
Now if you want to make use of this copied direct link from imgur and show an image in the GitHub readme file, you will need to use the Markdown syntax. For those of you who don’t know what is Markdown. Markdown is a plain text formatting syntax for writers. It allows you to quickly write structured content for the web, and have it seamlessly converted to clean, structured HTML.
If you want to learn more about Markdown syntax and all the different types of content that you can include in the Github readme using this syntax including headings, quotes, lists, images, etc, then check out this great blog article at ghost.
What you have to do now is go back to Github, open the readme 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 image will be huge!
<img src="https://i.imgur.com/k4ZYqy7.png" width="300">
And Voila here is the readme file with the screenshots’ images added:
How to add three images to GitHub readme in one row?
If you want to include more than one screenshot image in the same row, you just write the markdown in your readme file 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 images into one row as shown below:
And this is how we can easily add images to the Github readme file. If you want to know how to add gifs to Github readme, then you can check out this article.
That’s all for now and have a nice day!
