Add support for WebP images using `next/image` optimization

[bencodesall]

Is your feature request related to a problem? Please describe.
WebP is super great. The underlying jimp package doesn't support it.

Describe the solution you'd like
Add some method of supporting WebP in the next.js image optimization flow.

Describe alternatives you've considered
Not using next/image is not ideal as it's such a powerful feature of next-gen Next.js

Additional context
Add any other context or screenshots about the feature request here.

[bencodesall]

See closed (false) bug for further context.

[jlengstorf]

this is a great idea. swapping out the image processing library is definitely possible

we'll put this on the list, but if someone wanted to PR a change in the meantime, we'd very much welcome that!

[EliteMasterEric]

This one is a big deal. Part of why I use NextJS image optimization is because it provides automatic WebP support.

One option could be to include webp-converter and check the Accept header of the request.

[lindsaylevine]

hello! per some netlify announcements today (see: #155 (comment)), we've put out a special release of the plugin with some next/image and ISR related changes. while swapping jimp for sharp to enable webp support does/did not depend on the features netlify announced today, it made the most sense to group that change into this release.

per that comment i shared above, what i can offer you today is the special release:

npm install --save @netlify/plugin-nextjs@experimental-odb

as mentioned in that comment, it's my hope we can get this in a main release after some testing.

please let me know if you have any questions for feedback!!!

[lindsaylevine]

note: the sharp change means that any plugin users using next/image can no longer use the CLI to build and deploy their sites. this is because sharp's native binaries need to be compiled on the same platform they'll be deployed (aka linux aka the AWS runtime OS). using the CI and site build system will work fine. this is something we're looking into internally.

[surjithctly]

Does the current implementation optimize images?

I have a png image with more than 1 MB, but the output on the network tab is same.

it doesn't convert to webp as mentioned in this issue. But it also does not optimize/compress the quality for the web.

Is this expected?

[lindsaylevine]

@surjithctly hey! our logic is not built to convert png (or any other image type) to webp. we maintain the image type from what we receive. it should optimize if you pass a quality property to your image component.

[lindsaylevine]

Fixed via #330 - there's now an env var to force images to webp! (check out the image handling section of the README)