RFC: Use Sharp for image optimization if installed

[atcastle]

Update: This has shipped! Run npm install next@latest sharp to start using Sharp as the default.

---

What I'm proposing:

1. Allow the Next.js image optimizer to use Sharp (libvips) for it’s image transformations, if that library is already present on the server (i.e. installed by the user)
2. If Next is started in production mode (next start), uses the built-in image optimizer, and Sharp is not present on the server, log a console warning suggesting that the user install Sharp.

Why I'm proposing this

Sharp is a lot faster than Squoosh for this use case. This fact has been noticed by the community since Next.js moved from Sharp to Squoosh, and is an ongoing source of complaints. Some users say this is preventing them from using the image component entirely.

We have no reason to believe that Squoosh will be competitive with Sharp for this use case in the near future.

The two reasons Next.js switched to Squoosh are both addressed by this solution:

1. For a period, Sharp caused major issues when used on a new M1 Macbook. This issue is now resolved. Sharp can be used on M1 Macbooks.
2. Sharp slowed down initial Next install times substantially, because it is a large dependency and in some (but not most) cases, libvips and/or sharp must be compiled locally, which adds additional build time. Since many users will not use the built-in image optimizer for production image serving, this is an unacceptable cost. Switching to an opt-in model means that the extra install time is only experienced by users who benefit from Sharp.

How I propose to do this

I propose a solution that checks for the availability of Sharp at server startup using something like this:

let sharp
 try {
   sharp = require('sharp')
 } catch (e) {
   // Missing-sharp fallback logic
 }

We would also do a similar check during SSR or SSG, as part of the default loader provided with the image component. The default loader is what integrates with the image optimizer, so If that loader is called during production, and sharp is not installed, we can log a warning message on the server such as the following:

WARNING: For production image optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp' or install sharp globally, and Next.js will use it automatically for image optimization.

The Squoosh code will continue to exist in the Next.js codebase, as it is adequate for a development server use case (though even in that context, Sharp will be used if it available).

The Sharp integration code (similar to what was removed in this PR) will be added back into the codebase, to make use of the Sharp library if it is available.

[AlexStansfield]

We experienced a pretty severe degradation in image optimization performance. We're actually looking at 3rd party optimizers to use via loaders instead of the built in optimizer. Would definitely support this option to return to sharp based optimizer instead.

[Tralgar]

Hello, I'm experiencing same issue. I've downgraded nextjs but a solution to this huge problem would be nice, your proposal seems to be a good idea !
Maybe they are already working on it and try fix this an other way. But for my app it's really a pain, images are so importants...
Do you think we could fix it alone with sharp and not wait for a nextjs solution ?

[doptster]

Hi, we planning to use Next Image in production using Next JS 11, but the first time loading seems to be too slow (at least a few seconds), even using the examples in localhost, it is the same as well. Hopefully we have a resolution for this.

Reference: Image component

[karlhorky]

For those following along, @atcastle has opened a PR that was merged at #27346 🎉🎉 (already released in 11.0.2-canary.20)

As for non-canary versions, may be out in 11.0.2! 🚀

[styfle]

You can try it today on the canary channel, yarn add next@canary sharp

[karlhorky]

@styfle @atcastle any team plans to add sharp back as a non-optional dependency? Right now, it makes starting a serious Next.js project 2 commands rather than 1 (yarn add sharp in addition to yarn create next-app ...)

[qnxdev]

The problem is not many people actually know that this is included in 11

[styfle]

You should see a warning when running image optimization with next start