Github has a README.md for every project that contains documentation about a repository.

README.md contains plain text with markdown syntax.

Sometimes, You want to add images to the README.md file. It includes a screenshot of images.

How to add screenshot image to README.md on GitHub?

README.md is a markdown file written with markdown syntax.

So adding an image to markdown can be done in multiple ways.

  • use markdown image syntax.

The below syntax contains ![]() with alt text wrapped in square brackets[] and url and title is inside brackets().

![Alt text](url "Title")

Alt-text - is an image alt attribute text url- It contains relative url or complete HTTP url

Relative URL example For example, if your image is in your repository, you can give url relative to your repository. If the image is located in repository->assets->employee.png url, Then the url is included as seen below

![Employee data](/repository/assets/employee.png?raw=true "Employee Data title")

raw=true to an image does not process during markdown to HTML conversion and is displayed as these.

It displays the image with title and alt content.

Generated HTML on web page is

<img src="/repository/assets/employee.png" alt="Employee data" title="Employee Data title">

Hosted HTTP url:

if your image is hosted in hosted sites google and amazon cloud bucket or any image hosting providers, Please provide complete url

![Employee data](http://imageurl "Employee Data title")
  • use HTML image tag Another way is using the HTML img tag in the markdown readme file.

Since markdown supports to include HTML tags and GitHub process as valid content.

<img src="url" width="50%" height="50%">

How to resize an image in markdown readme in GitHub?

By default images take full width and height, So need to resize the image using width and height attributes.

It can be done in many ways to resize an image in GitHub markdown.

One way, using html image tag with width and height attributes. height and width can be pixel or percentage.

<img src="http://url/image.png" height="60" width="60" >

Another way using image tag with the style attribute

<img src="http://url/image.png" style=" width:60px ; height:60px "  >

Another way is using wrap markdown image syntax inside div with style CSS width and height properties.

<div style="width:60px ; height:60px">
![Employee data](/repository/assets/employee.png?raw=true "Employee Data title")
<div>

You can also apply position the image to left, right, and center using CSS styles.