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 a 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 are inside brackets()`.

![Alt text](URL "Title")

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

Relative URL example For example, if your image is in your repository, you can give a 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 a 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 a 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 including HTML tags and GitHub processes 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 an HTML image tag with width and height attributes. height and width can be pixels or percentages.

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

Another way using an 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 for the position of the image to left, right, and center using CSS styles.