gastby-image/gatsby-image-sharp for NextJS

[amesas]

Anyone knows of a component like gatsby-image that works with nextjs?

https://github.com/cyrilwanner/next-optimized-images takes cares of size-optimization/format but is missing a lot of features like:

• responsive image
• remote image download
• lazy load images
• hold the image position
• etc.

Thnx in advance for your help!

[truongsinh]

would love to make some PR

[jasonsilberman]

I've built most of this myself by

1. Creating an image pipeline using Sharp which is what Gatsby uses under the hood. This creates the responsive images and then tiny thumbnails for each size!
2. Creating a super simple ResponsiveImage component which accepts sources and sizes that support also specifying a small thumbnail to show before the larger image is loaded. The thumbnail is blown up and blurred until the regular image is ready which fades in.

This has worked really well and made my sites much quicker to load!

Still...I would love to see a full featured solution delivered with Next.js! I think part of the concern is that Gatsby is built for static sites only and so it can do all of its image processing at build time. As that is not the case for Next, it would be great if the solution could handle multiple use cases.

[truongsinh]

can you share your configuration/workflow?

[jasonsilberman]

Sure @truongsinh!

The images for my site are uploaded by users, so it requires processing them on the fly. I do this by using an API Route and Sharp. It looks something like this:

const MAX_DENSITY = 3; // this is the highest pixel density we will account for


// this generates images with given extraction and max width
// it will create HDPi images at density's up to MAX_DENSITY
// returns: a promise that resolves once all of the images are uploaded
const generateImages = (
  file,
  extraction,
  maxWidth,
  renderPath,
  fileName,
  quality
) => {
  return Promise.all(
    [...Array(MAX_DENSITY)].map((_, i) => {
      const density = i + 1;
      const filePath = `${renderPath}/${fileName}@${density}x.jpeg`;

      return new Promise((resolve, reject) => {
        const uploadStream = upload(filePath, {
          contentType: "image/jpeg",
        });

        // this is the sharp transformation we are performing on the image
        const transformation = sharp()
          .extract(extraction)
          .resize(maxWidth * density, null, {withoutEnlargement: true})
          .jpeg({quality});

        // run the pipeline
        file.pipe(transformation).pipe(uploadStream);

        // watch upload stream for errors or completion
        uploadStream
          .on("error", err => reject(err))
          .on("finish", () => resolve(filePath));
      });
    })
  );
};

I then call this function once for the fullWidth of the image (and a high quality parameter), and then once with a much smaller width (about 50px) and lower quality to generate the thumbnail. These images are eventually uploaded to cloud storage and hosted on a CDN.

I then use the following component to render the images (simplified version shown):

import {useState, useEffect} from "react";
import styled from "styled-components";

const RetinaPicture = ({sources, alt, src, placeholderSrc}) => {
  const [isVisible, setVisible] = useState(false);
  const [isLoaded, setLoaded] = useState(false);

  useEffect(() => setVisible(true), []);

  const imageLoaded = e => setLoaded(true);

  return (
    <ImageContainer>
      <PlaceholderPicture loaded={isLoaded}>
        {sources.map((s, i) => (
          <source
            key={`placeholder-${i}`}
            srcSet={s.placeholderSrcSet}
            media={s.media}
            sizes={s.sizes}
          />
        ))}
        <Image src={placeholderSrc} alt={alt} />
      </PlaceholderPicture>
      {isVisible && (
        <Picture loaded={isLoaded}>
          {sources.map((s, i) => (
            <source
              key={`source-${i}`}
              srcSet={s.srcSet}
              media={s.media}
              sizes={s.sizes}
            />
          ))}
          <Image src={src} alt={alt} onLoad={imageLoaded} />
        </Picture>
      )}
    </ImageContainer>
  );
};

export default RetinaPicture;

const ImageContainer = styled.div`
  position: relative;
  overflow: hidden;
`;

const PlaceholderPicture = styled.picture`
  position: relative;
  filter: blur(20px);
  opacity: ${props => (props.loaded ? "0" : "1")};
  transition: opacity 0s ease;
  transition-delay: 250ms;
`;

const Picture = styled.picture`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: ${props => (props.loaded ? "1" : "0")};
  transition: opacity 250ms ease;
`;

const Image = styled.img`
  width: 100%;
`;

Note: In theory we could add loading="lazy" or only set isVisible using an IntersectionObserver, but that was not required for my use case.

This component is pretty simple and specific, but it gives you an idea of how I implemented it for myself. I then use the component like so:

<RetinaPicture
        sources={[
          {
            srcSet: `${u}/[email protected] 720w, ${u}/[email protected] 1440w, ${u}/[email protected] 2160w`,
            placeholderSrcSet: `${u}/[email protected] 720w, ${u}/[email protected] 1440w, ${u}/[email protected] 2160w`,
            media: "(min-width: 1024px)",
            sizes: "(min-width: 1440px) 720px, 50vw",
          },
          {
            srcSet: `${u}/[email protected] 1024w, ${u}/[email protected] 2048w, ${u}/[email protected] 3072w`,
            placeholderSrcSet: `${u}/[email protected] 720w, ${u}/[email protected] 1440w, ${u}/[email protected] 2160w`,
            sizes: "100vw",
          },
        ]}
        src={`${u}/[email protected]`}
        placeholderSrc={`${u}/[email protected]`}
        alt="Contact Image"
      />

Hope this helps! Also seeing the message posted below by @cyrilwanner, I'd be happy to help out with creating the next version of next-optimized-version that could implement some of these features.

[cyrilwanner]

I've actually planned all those features and even more for the next major version of next-optimized-images (some of them were documented here: cyrilwanner/next-optimized-images#120).
However, I just didn't have much time over the last few months to work on it since I had other projects and university going on. But I just started to work more on it again last week so hopefully, I will be able to complete those features after the exams.

If next.js plans to provide built-in support for that, I would of course also be happy to contribute the work I have already done.

[amesas]

Thnx Cyril!

Great news! :)

[markiavelli7]

Hi Cyril, love what you've done with next-optimized-images and I've looked at your proposed changes for the next major version, looks great. Is there anything that I could help you with?