Static Image Optimisation for Images in NextJS Static Applications

As you may have seen NextJS does not support images with the next/image component when your next application is statically served content. Unfortunately, this is a big problem when it comes using NextJS.

However, there are alternatives you can use, but unfortunately it does mean not using the next/image component, instead you will use the package nextImageExportOptimizer directly with your images.

Although not using NextJS next/image it does mean your images will be statically served, with the ability of the images to be served at different resolutions and quality settings. 

Introduction

In order to start serving your optimised images you will need to install the next-image-export-optimizer package, you can find the npm package here

Set up the Config

The next-image-export-optimizer package expects configuration to exist within your next.config.js file, it will read from here when you run the package. In this guide we will just add the defaults and explain what they mean, more can be found at the package's github page

// next.config.js

  images: {
    domains: [
      'www.developright.co.uk',
      'localhost'
    ],
    loader: "custom",
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    nextImageExportOptimizer: {
      imageFolderPath: "public/images",
      exportFolderPath: "out",
      quality: 75,
    },
  },

The properties in the snippet above meaning the following:

• domains - what domains should be allowed to be loaded from
• loader - to ensure nextjs knows the image loader is a custom implementation
• imageSizes - an array of what sizes you want images to be generated at
• deviceSizes - an array of what resolutions you want images to be generated at
• nextImageExportOptimizer - specific config for the package itself
• imageFolderPath - where your images currently resize in
• exportFolderPath - where you want your images to be exported to (out if you're statically serving your app)
• quality - the quality setting for your images, lower is better but can result in bad images

 

Modify your components to use the package

You will need to modify your images to reference the package so the tool knows what images it needs to optimize and so the src of the image can be updated when built. For all images you want to use the package with update the references similar to the snippet below

// Any Component

// Imports
import ExportedImage from "next-image-export-optimizer";

// Inside the Component
            <ExportedImage
              src={
                props.thumbnail
                  ? `${process.env.NEXT_PUBLIC_WEBSITE_URL}${props.thumbnail}`
                  : "https://www.developright.co.uk/images/thumbnails/default-template.png"
              }
              alt="Placeholder Image"
              width="135"
              height="110"
              layout="responsive"
            />

As you can see you need to import the package then reference the package with the src, alt, width, & height. The package will do the optimisation and then swap out the src for the images for each of the deviceSizes & imageSizes you can supplied in the config earlier

 

Run the Script

You will now want to run the script as part of your build and/or deployment.

For example I updated my export script inside of package json to the following:

// package.json

"export": "./node_modules/.bin/next export && next-image-export-optimizer",

If you run npm run export in production mode you will now see your assets being optimised.

By default the package does not work when running in DEV mode.