How to Add Images to README.md on GitHub?

Last Updated : 19 Jun, 2024

Adding images to README.md on GitHub is a good practice to keep the individual user's readme effective & interactive, plus it also helps dictate the project admins better in what issues we are solving by displaying an image. In this article, we will learn how to add images to README.md in GitHub and the different ways to do so.

Table of Content

Why Add Images to Your README.md?

Including images in your README.md file can:

Improve Clarity: Visual aids can make complex information easier to understand.
Enhance Aesthetics: A visually appealing README can make your project more inviting to potential contributors.
Showcase Features: Screenshots and diagrams can effectively demonstrate the functionality and architecture of your project.

Steps to add images to README.md on GitHub

Approach 1: Simple copy-paste method

Select the image you want to add in the readme and right click on the image & click copy. Or else press CTRL + C. Go on the readme page and click CTRL + V.

Screenshot-(94) — Copy the image from the folder

Paste the image in the readme.md.

Final output:

Screenshot-(108)-compressed-(1) — README.md

Approach 2: Drag & Drop

This is probably the easiest among all. Simply click the image, drag it to the browser window & drop it on the readme file. The screenshot will appear on the readme & here's the final output:

Approach 3: Using the <img> tag

Using the following syntax of HTML, we can add images to the readme file:

<img src="" alt="">

Here, src is the link address of the image & alt is the text which will be displayed if for some reason the image is unable to load.

Copy the image address of any image.

Add the link to the img src tag in the README file.

Here's the final output:

Screenshot-(103)-compressed — Image in README.md

Approach 4: Using the path & description method

Using the following syntax, we can add images to the readme file:

![image description](relative/path/in/repository/to/image.svg)

Add a folder named "images" and add a forest.jpg image in the directory. Add the following command in the readme file:

![forest](images/forest.jpg)

Here, the text within the square brackets is the description of the image file & the text in the parentheses is the path of the image in the repository.