Image optimisation not working with Next 9.1

[KidkArolis]

I import an image like so:

import screenshot1 from '../../public/static/screenshots/screenshot-1.png?resize&sizes[]=375&sizes[]=750&sizes[]=1080&sizes[]=2160'

My config is:

[
      withOptimizedImages,
      {
        handleImages: ['jpeg', 'png', 'webp', 'gif'],
        optimizeImages: true,
        optimizeImagesInDev: true,
        responsiveLoader: {
          adapter: require('responsive-loader/sharp')
        },
        mozjpeg: {
          quality: 90
        },
        optipng: {
          optimizationLevel: 5
        }
      }
    ],

The ?resize does it's job, it outputs images for each required size. But imagemin-optipng (which is installed) is definitely not applying any optimisations since the build finishes quickly. If I run optipng manually it takes several minutes and reduces sizes of the images.

If I log JSON.stringify(_arguments) in imagemin-optipng/index.js I see this logged twice, althought I have dozens of images:

["-strip","all","-clobber","-o",5,"-out",null,"-fix",null]

I don't know if those nulls are just how exec-buffer is meant to work, or if that's another issue.

[hel-hadi]

Same problem for me and i am using "next": "9.0.0".

[madhur77]

Any solution for this?, I am also facing the same issue

[samuelcastro]

Same happening here. :/

[samuelcastro]

Any update here? Is this library still maintained?

[Vadorequest]

@cyrilwanner Are you aware of this issue? Is there any way we could help?

[KidkArolis]

I have since developed and starting using my own solution to embedding images in Next.js projects, in case anyone here finds it useful: https://github.com/humaans/next-img/

[cyrilwanner]

Is this library still maintained?

Yes, there have been even some patches to make it work with the newest next versions and I use it without any problems in my own projects. Additionally, over the last few weeks, I've put my focus into the next major version of this plugin which will not only solve all open issues but also provide many new features and makes it a lot easier to install and use images within nextjs. It is almost finished and a first canary version will be released within the next few days. The upcoming version is split across multiple modular packages, so it is also possible to use it outside of a nextjs project (while still providing a next.js plugin of course). This is also why you don't see much going on in this repository currently.

@cyrilwanner Are you aware of this issue? Is there any way we could help?

No, I didn't encounter this in my own projects. And as I also have some university exams coming up over the next two weeks, I didn't have much time recently to dig much deeper into this or other issues. And the little time I had, I've put into the next major version which will also resolve this issue as it is a complete rewrite.

But I would of course still happily accept pull requests (as I've also done over the last few weeks) if someone else wants to look into it.

[Vadorequest]

Thanks for the clarification, it's great to hear the upcoming version is not far away!

Regarding the bug, I don't have time to investigate it for now, I just know @samuelcastro made a PR on our repo using next-optimized-images but it didn't seem to work. But I understand if you prefer to invest your time working towards the new version instead. We'll wait for it then.

Additional question, will this new version allow to optimise images stored in a CMS/API? (on-the-fly optimisations)?

[dlbnco]

I was having the same issue with [email protected]. Just tested with https://github.com/cyrilwanner/next-optimized-images/releases/tag/v3.0.0-canary.0 and it seems to be solved.

yarn add next-optimized-images@^3.0.0-canary.0

[cyrilwanner]

Additional question, will this new version allow to optimise images stored in a CMS/API? (on-the-fly optimisations)?

Yes, remote image optimization is one of the new features planned. It isn't already in the current canary version but will be in an upcoming one.

I was having the same issue with [email protected]. Just tested with v3.0.0-canary.0 (release) and it seems to be solved.

yarn add next-optimized-images@^3.0.0-canary.0

Yes, the canary version should already work and I just published a new one with support for styled-components. So far, it seems to be stable so as soon as I have implemented all missing features from the current version, I'll release it on the non-canary tag.

[samuelcastro]

@cyrilwanner Any updates on this? When will it be finally release along with the on-the-fly optimizations?

Thanks!