DOCSEARCHbyAlgolia
Submit Docs

next-export-optimize-images

website·Indexed 29 days ago

https://next-export-optimize-images.vercel.app

A library for Next.js that optimizes images at build time, enabling the framework to function as a complete static site generator. It supports external images, a dedicated Picture component for multiple image formats, and integration with next/image.

Tokens
4.5K
Snippets
28
Records
41
Agent score
74%

What's inside next-export-optimize-images

  1. Optimize Next.js images during static export

    The next-export-optimize-images library allows developers to retain the full benefits of the next/image component when using next export by performing image optimization at build time. This solves the native Next.js limitation where image optimization is typically unavailable for static exports. Key capabilities include:

    • Build-time image optimization using the sharp library for high performance.
    • Support for all standard next/image options.
    • Automatic format conversion (e.g., PNG to WebP).
    • Local downloading and optimization of external images.
    • Caching mechanism to prevent redundant optimization of unchanged images.
    • Full support for TypeScript and the Next.js App Router.

  2. Optimize images at build time for Next.js static exports

    When using next export in Next.js, standard image optimization typically requires a cloud provider. This solution allows for image optimization to occur during the build process instead. It supports all standard next/image options and utilizes the sharp library for high-performance processing. Additionally, it includes an internal caching mechanism to prevent redundant optimization of the same images across builds.

  3. Update build scripts for image optimization

    To ensure images are optimized during the build process, append next-export-optimize-images to your build script in package.json so it runs immediately after next build.
    {
  "scripts": {
    "build": "next build && next-export-optimize-images"
  }
}

  5. Optimize external images during build

    The library supports optimizing external images at build time. During development, no optimization or local downloading is performed. In production, external images are downloaded, optimized, and served from local paths (e.g., /_next/static/chunks/images/...). For most use cases, using the RemoteImage or RemotePicture components is recommended.
    <Image src="https://next-export-optimize-images.vercel.app/og.png" width="1280" height="640" alt="" />

  7. Integrate next-export-optimize-images with next/image

    To combine build-time image optimization (via next-export-optimize-images) and on-demand optimization (via next/image), wrap your Next.js configuration with withExportImages and use the provided Image component for local assets while keeping NextImage for remote assets.
    // next.config.js
const withExportImages = require('next-export-optimize-images')

module.exports = withExportImages({
  output: 'export',
  images: {
    loader: 'default',
  },
})

// In your component
import NextImage from 'next/image'
import Image from 'next-export-optimize-images/image'

export default function Home() {
  return (
    <div>
      {/* On-demand optimization for remote images */}
      <NextImage src="https://example.com/img.png" width={1280} height={640} alt="" />
      {/* Build-time optimization for local images */}
      <Image src="/img.png" width={1280} height={640} alt="" />
    </div>
  )
}

  8. Reduce build time by adjusting sharp optimization effort

    You can speed up the image optimization process by reducing the CPU effort spent on compression for PNG, WebP, and AVIF formats via the sharpOptions in export-images.config.js.
    module.exports = {
  sharpOptions: {
    png: {
      effort: 1,
    },
    webp: {
      effort: 0,
    },
    avif: {
      effort: 0,
    },
  },
}

  9. Compare next-image-export-optimizer for Next.js image optimization

    The next-image-export-optimizer library processes images located in a specified directory (e.g., public/images). Key limitations include a complex configuration process, lack of support for all next/image options, and support for only one image extension. It is not recommended for users who need simple setup, support for multiple image formats in a Picture component, remote image optimization, or optimization during next build while using a Node.js server.

  10. Reduce build time by limiting generated image widths

    To decrease build times, you can reduce the number of image widths generated by next/image by specifying a limited set of deviceSizes in your next.config.js file.
    module.exports = withExportImages({
  images: {
    deviceSizes: [640, 960, 1280, 1600, 1920],
  },
})

  11. Create and initialize the image optimization configuration file

    To change the default behavior of next-export-optimize-images, create a configuration file named export-images.config.js in the root directory of your project.
    /**
 * @type {import('next-export-optimize-images').Config}
 */
const config = {
  // your configuration values.
}

module.exports = config

  12. Configure download delays for rate-limited external CDNs

    Use the remoteImagesDownloadsDelay configuration option to prevent hitting rate limits when downloading a large number of images from an external CDN. This setting introduces a sleep delay between individual image downloads.
    module.exports = {
  remoteImagesDownloadsDelay: 100, // delay in milliseconds
}