Skip to main content

Q&A

Some images are not displayed​

This may be a bug in Next.js.
Specifically, if you specify a small vw value for the sizes attribute.

https://github.com/vercel/next.js/issues/36807

For example, if 50vw is specified, the imageSizes of the configuration is used and an image smaller than the deviceSizes is set.
However, this is not applied at build time, and the image is not optimized as it should be.

The only way to fix this for now is to avoid specifying small vw in the sizes attribute.

Can I reduce build time?​

First, please check the specifications of your PC.
The standard is based on machines with 8 or more cores as recommended by SHARP, especially those with large L1/L2 CPU caches.

And if the build still takes a long time, try the following settings.

Unify quality.​

Unify any next/image that have different quality settings for the same image. This prevents multiple image patterns from being generated for the same image and reduces build time.

Reduce image width to be optimized​

Reduce the image width generated by next/image as follows.

next.config.js
module.exports = withExportImages({
  images: {
    deviceSizes: [640, 960, 1280, 1600, 1920],
  },
})

Reduce effort with sharp options​

export-images.config.js
module.exports = {
  sharpOptions: {
    png: {
      effort: 1,
    },
    webp: {
      effort: 0,
    },
    avif: {
      effort: 0,
    },
  },
}