How to change image size in markdown in GitHub

In this post, we will see how we can resize images in our markdown document or for Github readme.md profile.

Markdown is a free open-source markup language that let us easily write posts, documents, ebooks, and even readme files on our Github. It can also be used to create HTML pages using markdown parsers.

However, even though markdown makes it easy to format data easily, it sometimes lacks some basic formatting we use in our regular text editor like alignment, color, etc.

For alignment of an image, read: How to center align an image in markdown

Here, we will see different ways to change the markdown image size in a document or Github using

1. Using Plain HTML
2. Using the style attribute
3. Using CSS with alt attribute

Let's see each with an example.

Using HTML to resize an image in markdown

Since markdown supports plain HTML, we can use the <img> tag with the width and height attributes to resize an image in the document.

<img src="pic.jpeg" width="100" height="100" />

You can also use percentage to specify the width and height like this

<img src="pic.jpeg" width="50%" height="50%" />

The above-mentioned way is supported by Github. So you can edit and resize your image using the <img> tag.

Using style attribute to change the size of an image in markdown

Next, we can use the inline style attribute with the img HTML tag to set the height and width of an image in markdown.

Example:

<img src="pic.jpg" alt="mypic" style="width:200px; height:200px"/>

This will resize the image to a fixed height and width in your document.

However, this way of resizing images is not supported by GitHub.

Using custom CSS in a style tag

We can use the markdown syntax to add images and then we can resize the size of the image using CSS properties.

Example:

![mypic](pic.jpeg)

In CSS

img[alt=mypic] { width: 200px; }

This method won't work with Github Flavor Markdown (GFM).

Conclusion:

All the above-mentioned ways let us change the markdown image size with ease.

However in Github, to resize the image we just have to use the img tag with width and height attributes.

---

<u>FAQ</u>

How to resize an image in Kramdown?

Kramdown is a ruby library used to parse markdown files to other formats.

To change image size in kramdown we use the syntax given below.

![mypic](mypic.png){:height="100px" width="100px"}.

How to resize an image in RStudio?

Rstudio is an IDE for R programming language.

To change the size of the image in RStudio we use

![mypic](mypic.png){width=250}