[RFC] getImageProps

[joe-bell]

Overview

The new import image from "../some-image.jpg"; method introduced in Next.js 11 works great, but has some caveats:

1. It's not immediately obviously what the import provides
2. It's not possible to create a blurDataURL for remote images (static or dynamic)

getImageProps aims to resolve this.

The API is similar to that of – my own project – plaiceholder, returning the image props for later use on the Image component.

Note: It might seem daft that I'm suggesting Next.js to replicate something I've already built, but I'm all for it – plaiceholder isn't framework-specific and supports other projects such as 11ty, but more importantly, I'm all for making the default Next.js DX better out-of-the-box

This could be used for static images anywhere in a file, and dynamic images (e.g. when sourced from a content API) inside getStaticProps

Example

import * as React from "react";
import { InferGetStaticPropsType } from "next";
import Image, { getImageProps } from "next/image";

export const getStaticProps = async () => {
  const imageProps = getImageProps(
    "https://images.unsplash.com/photo-1621961458348-f013d219b50c?auto=format&fit=crop&w=2850&q=80"
  );
  return {
    props: {
      imageProps,
    },
  };
};

const ExamplePage: React.FC<InferGetStaticPropsType<typeof getStaticProps>> = ({
  imageProps,
}) => {
  console.log(imageProps)
    // {
    //   src: "https://images.unsplash.com/photo-1621961458348-f013d219b50c?auto=format&fit=crop&w=2850&q=80",
    //   width: 600,
    //   height: 400,
    //   blurDataURL: "data:image/jpeg;base64,/9j/2wBD…",
    // }

  return <Image {...imageProps} placeholder="blur" />
};

export default ExamplePage;

Further Resources

• https://github.com/joe-bell/plaiceholder

Additional Context

• next/image - out of the box blur support for external images #26168
• Add placeholder="blur" to Image component #18858 (comment)

cc @atcastle @styfle @lachlanjc (continuing our private chat publicly)

[atcastle]

Quick nit: I think it would need to be import Image, { getImageProps } from "next/image"; in your example code.

[joe-bell]

Ah yes good spot! Forgot to add that

[atcastle]

As we were discussing in chat earlier, one thing to keep in mind is that this approach only works for images that we know about at build time. Doing something like this at serve time would be a big performance anti-pattern and counteract a lot of the performance features built into the image component.
So I think we would need to do static analysis with something like a Babel plugin to ensure that the getImageProps function is only being called inside the getStaticProps function, and is only passed a string literal as an argument.

[styfle]

Would you expect getImageProps() to work at runtime or only build time?

[joe-bell]

I would expect it only to run at build-time