How to change image size in Markdown

As a developer, you may have heard about Markdown at least once. For those who didn’t know, Markdown is a simple but powerful markup language that lets you write easily without worrying about the formatting. You can use Markdown to write all kinds of texts such as blog posts, readme files and even an entire book. There are also numerous tools designed to convert Markdown into popular formats like Word, HTML or PDFs.

This article is going to show you how to change the image size when you’re writing in Markdown.

Change image size in Markdown

There are a lot of Markdown flavors, but the ones that most of you are familiar with is Github Flavor Markdown (GFM). Unfortunately, the syntax does not support resizing image syntax out of the box.

In order to change the image size in Markdown, you have to use raw HTML. Follow the instructions below:

  • Obtain the URL of the image, either by uploading it or copy from elsewhere.
  • Put the image URL in <img> tag below. Remember to change the width and height accordingly.
    <img src="IMAGE_URL_HERE"  width="300" height="300">
  • You can specify width without height attribute and vice versa.
  • Alternatively, you can change image size using percentage value like below:
    <img src="IMAGE_URL_HERE"  width=50% height=50%>

Resize image in kramdown

kramdown is a free and open source Ruby library for parsing and converting Markdown to other formats. It uses its own flavor of Markdown, actually a superset Markdown.

The kramdown syntax is based on the Markdown syntax and has been enhanced with features that are found in other Markdown implementations like Maruku, PHP Markdown Extra and Pandoc.

If you happen to use GitHub Pages with Jekyll, you can configure it to use kramdown as the Markdown processor and use the following syntax to resize an image by specifying image width and height:

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.
Code language: JavaScript (javascript)

Resize image in RStudio

If you’re writing Markdown in RStudio, you should know that it uses Pandoc to handle Markdown conversion under the hood. In fact, RStudio IDE is bundled with a version of Pandoc, so you do not need to install Pandoc by yourself if you are using the RStudio IDE.

Pandoc supports image dimensions by default on recent releases, so you can freely resize your image using the following syntax.

![figure description](imageFile.png){width=250}

If you encounter an error using compilation, make sure you’re using a recent pandoc version and try again.

We hope that the article helped you learned how to change image size in Markdown. We’ve also compiled a list of 5 Markdown Viewer for Chrome in case you need to quickly preview your document in a Chromium-based browser. If you have any suggestion, please feel free to leave a comment below.

Leave a Comment