Resizing Images in Markdown and using it in Next.JS with Image Component.

11/9/2022 •281 views •1 min read


Let's say you have a self hosted blogs in your website and you are using Markdown to write your blog posts.

You might want to use next/image component to render your images in your blog posts for better performance.

But there is no way to resize your images in Markdown.

So, We can use a simple plugin that I've created called rehype-image-resize to resize your images in Markdown. You can head over to the NPM page to know more about the plugin.

This blog is my way of demonstrating that the plugin works.

All the images in this blog are resized using the plugin.

You can inspect any image in this article and see that the next/image is being used.

Images from Unsplash rendered using Next/Image

Image 1

Image 1
Image 1

Image 2

Image 2
Image 2

Image 3

Image 3
Image 3


Found this blog helpful? Share it with your friends!