next-optimized-images
next-optimized-images copied to clipboard
Image is not getting compressed in my NEXT app
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!
Had the same issue, this config helped. https://github.com/Jam3/nextjs-boilerplate/blob/637fa801680f92c2e82cbfc576e7ac493c6e0e0a/next.config.js
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?