Optimizing images from Markdown files

[zeevo]

I have an app that pulls data from Markdown files. It references images in a manner like this:

![Rock Climbing](./assets/rock-climbing.jpg)

Are there plans to integrate images within Markdown files with next-optimized-images? It would be nice to capture the functionality of gatsby-remark-images

[cyrilwanner]

Thank you for that idea! I think it would make sense and I'll try to support that with the next major version, which I'm currently actively working on.

[vickonrails]

I second this feature @cyrilwanner

I just switched from gatsby and it would be hard to live without this feature.

What would it take to get it to work like gatsby-image? You also mentioned the V3, without any pressure whatsoever, I'm anticipating it.

Awesome work with the library. ⚡

[iamtimsmith]

@cyrilwanner @v Hey there! I’m also coming from gatsby and have been using the react-markdown library to handle markdown in my Nextjs project. If you’re also using react markdown, you can create a component similar to gatsby-image and pass it into the renderers prop on the markdown component. That will replace every image tag with your image component which can use the optimized images.

[pbshgthm]

@iamtimsmith I'd like to use image optimisation on markdown files too. I'm using MDX. However, I couldn't understand your solution as I don't have experience with Gatsby. Would be great if you can elaborate a bit. Thank you.

[iamtimsmith]

@pbshgthm You bet! Gatsby works a little differently since it has sharp built in and uses graphql to get data, but the gist is that they have a special component and when you pass the data about the image into the component, it renders an optimized version of that image and can provide some neat effects.

To achieve a similar result, you can follow the instructions here which allows you to optimize images on the fly. Then, if you're using the react-markdown library to render your markdown, it can accept a prop called "renderers" which is an object. Inside this object, you can specify which types of elements it should look for in the rendered markdown and replace it with the specified components. I have placed some example code below to help illustrate this further:

First, you'll create an image component which optimizes the images:

// components/image.jsx
export default = ({src, alt}) => (
  <picture>
    <source srcset={require(`images/${src}?webp`)} type='image/webp' />
    <img src={src} alt={alt} />
  </picture>
);

Then, you will create your markdown:

# Hello there
General Kenobi!
![Star wars](star-wars.jpg)

Now, assuming that "data" is your parsed markdown:

// pages/post.jsx
import ReactMarkdown from 'react-markdown';
import Image from '../components/image';

export default ({data}) => (
  <ReactMarkdown
    source={data}
    renderers={{
      image: Image,
    }}
  />
);

Your output will look like this because it replaced all <img> tags with your custom image component:

<h1>Hello there</h1>
<p>General Kenobi</p>
<picture>
  <source srcset="/_next/static/images/star-wars-2378e7b9a76a3a45d856fd4c6018593e.jpg.webp" type="image/webp">
  <img src="/_next/static/images/timsmith-teal-2378e7b9a76a3a45d856fd4c6018593e.png" alt="Star wars">
</picture>

[pbshgthm]

@iamtimsmith Thank you for the detailed explanation. I am using MDX. But I was able to apply the logic you've mentioned in MDX. It's working smoothly. And thank you once again for the quick help :)

[iamtimsmith]

No problem! Tim Smith

…

On Oct 17, 2020, 12:05 PM -0500, Poobesh Gowtham ***@***.***>, wrote: @iamtimsmith Thank you for the detailed explanation. I am using MDX. But I was able to apply the logic you've mentioned in MDX. It's working smoothly. And thank you once again for the quick help :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[JackMcBride98]

Thank you for that idea! I think it would make sense and I'll try to support that with the next major version, which I'm currently actively working on.

Has this been done now?