Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image optimisation not working with Next 9.1 #113

Open
KidkArolis opened this issue Oct 15, 2019 · 11 comments
Open

Image optimisation not working with Next 9.1 #113

KidkArolis opened this issue Oct 15, 2019 · 11 comments

Comments

@KidkArolis
Copy link

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
Copy link

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

@madhur77
Copy link

madhur77 commented Dec 16, 2019

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

@samuelcastro
Copy link

Same happening here. :/

@samuelcastro
Copy link

Any update here? Is this library still maintained?

@Vadorequest
Copy link

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

@KidkArolis
Copy link
Author

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
Copy link
Owner

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
Copy link

Vadorequest commented Jun 12, 2020

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
Copy link

dlbnco commented Jul 21, 2020

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
Copy link
Owner

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
Copy link

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

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants