PNG images not optimized

[mrgoonie]

While JPG works fine, PNG images don't seem to be optimized.

page/index.js

export default function Home(){
  return (<img src={require("../images/thumb-large@2x.png?url")} width={500} />)
}

next.config.js

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

module.exports = withPlugins([
  [
    optimizedImages,
  ]
])

package.json

{
  "name": "next-imagemin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "file-loader": "^6.0.0",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-pngquant": "^9.0.0",
    "imagemin-svgo": "^8.0.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "next": "9.4.4",
    "next-compose-plugins": "^2.2.0",
    "next-optimized-images": "^2.6.1",
    "node-sass": "^4.14.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "responsive-loader": "^2.0.0",
    "sass": "^1.26.10",
    "sharp": "^0.25.4",
    "styled-jsx-plugin-sass": "^1.0.0",
    "url-loader": "^4.1.0",
    "webp-loader": "^0.6.0"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^6.0.3"
  }
}

And the image is: /images/thumb-large@2x.png

.next/static/images/thumb-large@2x-a906e213f32c5020bd4dffa9c9641d51.png

...Or am I doing something incorrectly?

[cyrilwanner]

Hi @mrgoonie I see in your package.json that you have imagemin-optipng and imagemin-pngquant installed. I'm not sure, but this could be the reason that next-optimized-images gets confused because of that. You usually only want to use one optimization library for png images. Can you try to uninstall imagemin-pngquant so you only have imagemin-optipng installed (which is more commonly used) and see if that changes anything?

[mrgoonie]

Thanks for the response, I tried your suggestion, but the result is still the same 😢

[efeminella]

I'm having the same issue, installed imagemin-optipng and next-optimized-images, however, when .png image sizes remain the same as before installing and adding the plugin.

[cyrilwanner]

I recommend using the canary version in this case as it is a complete rewrite and image optimization was moved to WebAssembly and so it works the same in every environment. It solves all current issues and can already be considered stable, just a few features are missing before I will publish it as a non-canary version.

I am sorry that I don't have enough time to investigate this problem in the v2 version. But I want to invest most of my time in the canary version to be able to publish it as soon as possible and resolve all open issues. And it is also possible that this issue is not even caused by next-optimized-images as it uses a 3rd party webpack loader internally which calls the imagemin plugins.

[krystof-k]

I'm facing the same issue even using the canary version. JPG is optimized (e.g. 1.7 MB to 400 kB), but PNG is even bigger than the original (15.5 MB to 15.6 MB).