Image is not getting compressed in my NEXT app

[mllamazares]

I've set up my next.config.js like this:

const withPlugins = require('next-compose-plugins');

const optimizedImages = require('next-optimized-images');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withPlugins([
  [optimizedImages,
    {
      // these are the default values so you don't have to provide them if they are good enough for your use-case.
      // but you can overwrite them here with any valid value you want.
      inlineImageLimit: 8192,
      imagesFolder: 'static/images',
      imagesName: '[name]-[hash].[ext]',
      handleImages: ['jpeg', 'jpg', 'png', 'svg', 'webp', 'gif'],
      removeOriginalExtension: false,
      optimizeImages: true,
      optimizeImagesInDev: false,
      mozjpeg: {
        quality: 40,
      },
      optipng: {
        optimizationLevel: 7,
      },
      pngquant: false,
      gifsicle: {
        interlaced: true,
        optimizationLevel: 3,
      },
      svgo: {
        // enable/disable svgo plugins here
      },
      webp: {
        preset: 'default',
        quality: 75,
      },
    }],
    [withBundleAnalyzer,
    {
      images: {
        disableStaticImages: true
      },
      reactStrictMode: true,
      pageExtensions: ['js', 'jsx', 'md', 'mdx'],
      eslint: {
        dirs: ['pages', 'components', 'lib', 'layouts', 'scripts'],
      },
      experimental: { esmExternals: true },
      webpack: (config, { dev, isServer }) => {
        config.module.rules.push({
          test: /\.(png|jpe?g|gif|mp4)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                publicPath: '/_next',
                name: 'static/media/[name].[hash].[ext]',
              },
            },
          ],
        })

        config.module.rules.push({
          test: /\.svg$/,
          use: ['@svgr/webpack'],
        })

        if (!dev && !isServer) {
          // Replace React with Preact only in client production build
          Object.assign(config.resolve.alias, {
            react: 'preact/compat',
            'react-dom/test-utils': 'preact/test-utils',
            'react-dom': 'preact/compat',
          })
        }

        return config
      },
    },
  ],
])

Then, I've installed all the required plugins:

npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loader

Then, in my Image component, I've hardcoded an URL for testing purposes:

import React from 'react';

const Image = ({ src, ...rest }) => {
  return <img src={require('/public/static/images/bigaf1.png').default} {...rest} />
}

export default Image

However, the output image does not get any compression (1.06MB), although it has the slug set after being processed: https://github.com/mllamazares/mllamazares.github.io/blob/gh-pages/_next/static/media/bigaf1.8f461a11b3d4fab845e830dc3296560f.png

This is the original image (of the exact same size): https://github.com/mllamazares/mllamazares.github.io/blob/gh-pages/static/images/bigaf1.png

I've also tried with .jpg or .jpeg images, but I face the same issue. What am I missing? Any ideas? Thanks!

[erm-an]

Had the same issue, this config helped. https://github.com/Jam3/nextjs-boilerplate/blob/637fa801680f92c2e82cbfc576e7ac493c6e0e0a/next.config.js

[mllamazares]

Thanks for sharing! I'm not able to test it right now, though. Could you elaborate a bit on what was the issue and which instruction fixed it?