Sharp not optimising images
Unanswered
Florida White posted this in #help-forum
Florida WhiteOP
I've built a next.js app but my image-loading is super slow. I am using <Image /> from Next.
I installed sharp but it doesn't seem to be running and optimising my images.
I don't have this folder in my node-modules but I think I should: node-modules/next/dist/compiled/sharp .
I can see sharp is installed in my package.json. I have tried reinstalling all packages and rebuilding but no luck.
My versions should be compatible. I'm using: "sharp": "^0.34.3" and "next": "^15.3.5"
I'd be super grateful for any ideas!!
I installed sharp but it doesn't seem to be running and optimising my images.
I don't have this folder in my node-modules but I think I should: node-modules/next/dist/compiled/sharp .
I can see sharp is installed in my package.json. I have tried reinstalling all packages and rebuilding but no luck.
My versions should be compatible. I'm using: "sharp": "^0.34.3" and "next": "^15.3.5"
I'd be super grateful for any ideas!!
2 Replies
You do not need to manually install
Next comes with it bundled in by default. You do however need to configure the images you want to allow to get optimized.
Local images use
Docs: https://nextjs.org/docs/app/api-reference/components/image#localpatterns
sharp to optimize images with next/image.Next comes with it bundled in by default. You do however need to configure the images you want to allow to get optimized.
Local images use
images.localPatterns while remote images use image.remotePatterns in your next.config.js|tsDocs: https://nextjs.org/docs/app/api-reference/components/image#localpatterns
Florida WhiteOP
Thanks for the tip @Plague. Although I'm pretty sure it's saying that's only required to add that setup if you have special routes or non-standard ones. For example, my images are kept locally in my public folder which from my research doesn't require any special setup