Generating blurDataURL for remote images in Next.js

1 year ago

•

6 min read

The Next.js Image Component is IMO the best tool that you can use to ensure the images on your Next.js website are optimized, and your page loads quicker. One interesting feature that the next/image component provides is the placeholder prop, whose values can be either blur or empty.

When the placeholder is set to blur, we need to provide the blurDataURL. If we're importing local images statically, Next.js can access the resource and generate the blurDataURL for us. But, when we want to add the blur effect to remote images there are a few things that we need to do:

Register the provider's domain in next.config.js
Generate the blurDataURL and pass it to the NextImage component

I'm using MDX for the content of my website (this one!), so in this article I'll explain the blurDataURL generation integrated with MDX, but the functionality is generic and not tied with MDX in any way. So let's begin!

Registering provider domains

First things first, you need to register the provider's domain in order to render remote images with next/image. In my case, I'm loading the og:image from GitHub, and the URL looks like this:

https://opengraph.githubassets.com/f4a95bd3aa5113a1f599f5a810edeb16b885f3364b0443dc3c34a02c3290a5d8/chakra-ui/chakra-ui-docs/pull/154

By looking at the URL, we know that we need to register the opengraph.githubassets.com domain, so let's jump in the next.config.js and do that:

1// next.config.js
2
3module.exports = {
4  images: {
5    domains: ['opengraph.githubassets.com'],
6  },
7};

And that's it! Now that we've got out of the way, let's start generating the blurDataURL prop.

Generate blurDataURL

Since I'm using MDX and I'm rendering the pages statically, I've added a simple plugin that filters out all of the images from the markdown, calculates their width, height, and blurDataURL and passes them as props:

1// src/utils/plugins/image-metadata.ts
2
3import imageSize from 'image-size';
4import { ISizeCalculationResult } from 'image-size/dist/types/interface';
5import path from 'path';
6import { getPlaiceholder } from 'plaiceholder';
7import { Node } from 'unist';
8import { visit } from 'unist-util-visit';
9import { promisify } from 'util';
10
11// Convert the imageSize method from callback-based to a Promise-based
12// promisify is a built-in nodejs utility function btw
13const sizeOf = promisify(imageSize);
14
15// The ImageNode type, because we're using TypeScript
16type ImageNode = {
17  type: 'element';
18  tagName: 'img';
19  properties: {
20    src: string;
21    height?: number;
22    width?: number;
23    blurDataURL?: string;
24    placeholder?: 'blur' | 'empty';
25  };
26};
27
28// Just to check if the node is an image node
29function isImageNode(node: Node): node is ImageNode {
30  const img = node as ImageNode;
31  return (
32    img.type === 'element' &&
33    img.tagName === 'img' &&
34    img.properties &&
35    typeof img.properties.src === 'string'
36  );
37}
38
39async function addProps(node: ImageNode): Promise<void> {
40  let res: ISizeCalculationResult;
41  let blur64: string;
42
43  // Check if the image is external (remote)
44  const isExternal = node.properties.src.startsWith('http');
45
46  // If it's local, we can use the sizeOf method directly, and pass the path of the image
47  if (!isExternal) {
48    // Calculate image resolution (width, height)
49    res = await sizeOf(path.join(process.cwd(), 'public', node.properties.src));
50    // Calculate base64 for the blur
51    blur64 = (await getPlaiceholder(node.properties.src)).base64;
52  } else {
53    // If the image is external (remote), we'd want to fetch it first
54    const imageRes = await fetch(node.properties.src);
55    // Convert the HTTP result into a buffer
56    const arrayBuffer = await imageRes.arrayBuffer();
57    const buffer = Buffer.from(arrayBuffer);
58
59    // Calculate the resolution using a buffer instead of a file path
60    res = await imageSize(buffer);
61    // Calculate the base64 for the blur using the same buffer
62    blur64 = (await getPlaiceholder(buffer)).base64;
63  }
64
65  // If an error happened calculating the resolution, throw an error
66  if (!res) throw Error(`Invalid image with src "${node.properties.src}"`);
67
68  // add the props in the properties object of the node
69  // the properties object later gets transformed as props
70  node.properties.width = res.width;
71  node.properties.height = res.height;
72
73  node.properties.blurDataURL = blur64;
74  node.properties.placeholder = 'blur';
75}
76
77const imageMetadata = () => {
78  return async function transformer(tree: Node): Promise<Node> {
79    // Create an array to hold all of the images from the markdown file
80    const images: ImageNode[] = [];
81
82    visit(tree, 'element', (node) => {
83      // Visit every node in the tree, check if it's an image and push it in the images array
84      if (isImageNode(node)) {
85        images.push(node);
86      }
87    });
88
89    for (const image of images) {
90      // Loop through all of the images and add their props
91      await addProps(image);
92    }
93
94    return tree;
95  };
96};
97
98export default imageMetadata;

That's all we need to do to calculate the width, height, and blurDataURL props. In order to use this plugin, let's jump to the pages/blog/[slug].tsx page that renders the blog post itself:

1export const getStaticProps: GetStaticProps<Props> = async (ctx) => {
2  // get the post slug from the params
3  const slug = ctx.params.slug as string;
4
5  // get the post content. readBlogPost just reads the file contents using fs.readFile(postPath, 'utf8')
6  const postContent = await readBlogPost(slug);
7
8  // Use the gray-matter package to isolate the markdown matter (title, description, date) from the content
9  const {
10    content,
11    data: { title, description, date },
12  } = matter(postContent);
13
14  return {
15    props: {
16      // use the serialize method from the 'next-mdx-remote/serialize' package to compile the MDX
17      source: await serialize(content, {
18        mdxOptions: {
19          // pass the imageMetadata utility function we just created
20          rehypePlugins: [imageMetadata],
21        },
22      }),
23      title,
24      description,
25      date,
26      slug,
27    },
28  };
29};

And that's it! To see this in action, put a console.log in your MDX Image component and check the props. Here's my MDX Image component:

1const Image = (props) => {
2  return (
3    <NextImage {...props} layout='responsive' loading='lazy' quality={100} />
4  );
5};

The props object is actually the node.properties object in the image-metadata.ts file.

If you've followed along the article, you should already see the blur effect happening.

This solution can also be applied in different scenarios other than MDX. Just bear in mind that obtaining the image data (the !isExternal if statement in image-metadata.ts) is a server-side functionality, because it uses Node.JS's fs package. If for some reason you need to do this on the client-side you need to change the way you get the image data.

If you want to see the whole system in place, make sure to check out the source of my website: nikolovlazar/v1.nikolovlazar.com

Note: if you're applying the blur effect on user submitted images, make sure you know where those images will be stored, and don't forget to register the domain in the next.config.js file.

Subscribe to my newsletter ✉️

Get emails from me about web development, content creation, and whenever I publish new content.

Subscribe on Substack