Include image metadata from content source

[vimtor]

Hi there! Can image metadata be included when extracted from content instead of front matter?

I need the image width and height in the MDX component for the Next.js Image component. Currently, only src and alt properties are available.

Also, is it possible to import images directly for use with a custom component like this:

import image from './example.png'

# Title

See the image below:

<Figure>
  <FigureImage src={image} alt="" />
  <FigureCaption>
    Caption
  </FigureCaption>
</Figure>

[zce]

First of all, Velite does not intend to support the dynamic import method, but now there are plans to process the local image metadata referenced in the content.

[vimtor]

Got it, @zce!

Velite looks really promising. In case anyone is interested, I finally managed to accomplish this using RSC:

import getImageSize from "image-size";
import { Figure, FigureImage, FigureCaption } from "./components";

const useMDXComponent = (code: string) => {
  const fn = new Function(code);
  return fn({ ...runtime }).default;
};

interface MdxProps {
  code: string;
  components?: Record<string, React.ComponentType>;
}

export const MDXContent = async ({ code, components }: MdxProps) => {
  const Component = useMDXComponent(code);
  return (
    <Component
      components={{
        ...components,
        img: async ({ src, alt }: { src: string; alt?: string }) => {
          const location = path.join(process.cwd(), "public", src);
          const { width, height } = getImageSize(location);

          return (
            <Figure>
              <FigureImage
                src={src}
                alt={alt ?? ""}
                width={width}
                height={height}
              />
              {alt && <FigureCaption>{alt}</FigureCaption>}
            </Figure>
          );
        },
      }}
    />
  );
};

[zce]

Yes, this is a good idea at the moment, but I still plan to put getting metadata into build to improve runtime efficiency

[Adriel-M]

I did something hacky where you embed the info via a rehype plugin: https://github.com/Adriel-M/adriel.dev/blob/main/lib/remarkPlugins/RemarkImgToJsx.ts (originally from https://github.com/timlrx/pliny/blob/main/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)

I also bundled everything in the images folder https://github.com/Adriel-M/adriel.dev/blob/main/lib/Images.ts#L2 and swap the source to that bundled path: https://github.com/Adriel-M/adriel.dev/blob/main/components/Image.tsx#L7

I did this to actually have the image have a non 0 max age cache-control for nextjs: (https://nextjs.org/docs/app/building-your-application/optimizing/static-assets#caching)

If you're not on nextjs, just the first paragraph seems to be the useful bit. I just came from contentlayer and I'm still exploring the capabilities of velite.

[zce]

I did something hacky where you embed the info via a rehype plugin: Adriel-M/adriel.dev@main/lib/remarkPlugins/RemarkImgToJsx.ts (originally from timlrx/pliny@main/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)

At present, it is a good way to use the remark/rehipe plug-in, but I plan to integrate image metadata into the built-in rehipeCopyLinkedFiles / remarkCopyLinkedFiles plug-in

[zce]

If you use Next.js, you can also get a better experience by optimizing the pictures in building with the custom image loader.

There is a tool for my own use: https://github.com/zce/zimg

import { ImageLoader } from 'next/image'

const CustomLoader: ImageLoader = ({ src, width, quality }) => {
  if (process.env.NODE_ENV !== 'production') return src + '?dev'
  // do not optimize svgs and gifs
  if (/\.(svg|gif)$/.test(src)) return src + '?uo'
  // pre-optimize images with zimg in production build
  if (/^\//.test(src)) return src.replace(/\.[a-z]+$/i, `.${width}.webp`)
  return `${src}?w=${width}&q=${quality ?? 75}`
}

export default CustomLoader

I do this myself

[Adriel-M]

Great!
It works with my bundling approach: https://github.com/Adriel-M/adriel.dev/pull/166/files#diff-5acfbc6c5ec1739b3121c7454d949384b38bcbdffa4645a0b002e52521bed26eR3

Using this since cloudflare doesn't have image optimization. Thanks a lot!

Roughly how much time does it add to your builds?

[zce]

Roughly how much time does it add to your builds?

This depends on the number and size of images you need to process, as well as the performance of the host. Here is my performance of a case in Vercel

[syhily]

Here comes another idea which use the Velite built-in getImageMetadata and remarkPlugins. It's a fork from @Adriel-M 's work.

https://github.com/syhily/yufan.me/blob/0b692189693aa4e1251fd2c038e4728181aeb8e0/src/components/mdx/remark-plugins.ts

[wontory]

I did something hacky where you embed the info via a rehype plugin: Adriel-M/adriel.dev@main/lib/remarkPlugins/RemarkImgToJsx.ts (originally from timlrx/pliny@main/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)

At present, it is a good way to use the remark/rehipe plug-in, but I plan to integrate image metadata into the built-in rehipeCopyLinkedFiles / remarkCopyLinkedFiles plug-in

How is this going?