Anup D'Souza

Mobile Application Developer

less than 1 minute read

How to resize images in Markdown posts

If like me you also write your website posts in markdown, the only way to link images is as follows:

![image](/assets/images/post22/lone-tree.jpg)

You provide the image’s path whether relative or absolute with the ![alt text](image url) markdown syntax. This results in the image displaying in full size which is not always optimal.

Result:

image

There is however a way to size images if your markdown renderer supports HTML like Jekyll for instance. In this case you can link the image using HTML’s image tag as follows:

[<img src="/assets/images/post21/preview-remove-bg-3.jpg" width="100"/>](/assets/images/post21/preview-remove-bg-3.jpg)

Result: Width = 100px

This is a really convenient way to control the size of images. You can specify the height & width as you’d normally do in HTML. You can also specify the size as a percentage!

[<img src="/assets/images/post22/lone-tree.jpg" width="50%"/>](/assets/images/post22/lone-tree.jpg)

Result: Width = 50%

Consider subscribing to my YouTube channel & follow me on X(Twitter). Leave a comment if you have any questions.

Share this article if you found it useful !

Leave a comment

You may also enjoy