How to add images to README.md on GitHub?

This tutorial covers adding images or screenshots to the GitHub markdown README.md file and resizing images using syntax HTML image tag and examples..

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.

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

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

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

Alt-text - is an image alt attribute text url- It contains a 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

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

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

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

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.

Another way using an image tag with the style attribute

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

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