Giters

Niels-IO / next-image-export-optimizer

Use Next.js advanced <Image/> component with the static export functionality. Optimizes all static images in an additional step after the Next.js static export.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Images exporting too all sizes but all rendering at full size

brandlewco opened this issue · comments

commented

I can see my images being exported and the responsive sizes being generated and set in the image srcset, however each size of the exported image is actually being rendering at full unoptimized resolution. Here's sample of one image at it's smallest size, and largest.

you'll see both are full resolution, though they seem to have been converted to webp properly at least.

here is my next.config.js

module.exports = {
  output: 'export',
  images: {
    loader: "custom",
    imageSizes: [720,1080,2160],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
  },
  transpilePackages: ["next-image-export-optimizer"],
  env: {
    nextImageExportOptimizer_imageFolderPath: "public/uploads",
    nextImageExportOptimizer_exportFolderPath: "out",
    nextImageExportOptimizer_quality: "75",
    nextImageExportOptimizer_storePicturesInWEBP: "true",
    nextImageExportOptimizer_exportFolderName: "opt",
    nextImageExportOptimizer_generateAndUseBlurImages: "true",
    nextImageExportOptimizer_remoteImageCacheTTL: "0",
  },
  reactStrictMode: true,
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.jsx$/,
      use: [
        {
          loader: 'import-glob-keyed'
        },
      ],
    })

    return config
  },
}

and my build command is
"build": "next build && next-image-export-optimizer",

commented

Hi @brandlewco,

Thank you very much for this bug report. The code assumed that the imageSize and deviceSizes were ordered ascending. Some logic broke because your array weren't ordered. I fixed this now.