Proposal: Allow custom parameters for image CDNs

[agcty]

Feature request

It'd be really cool if NextImage allowed custom parameters for image CDNs. For example Imgix allows you to set various properties from blur, brightness, contrast to watermark images. Currently that's not possible. The weird thing right now is that some parameters are actually already set, namely auto=format and width.

Take the following example:

// next.config.js
images: {
    deviceSizes: [320, 420, 768, 1024, 1200],
    loader: "imgix",
    path: "https://zerolens-dev.imgix.net/",
  },

<Image
   src="renders/1zZfDWH6UIo6TnUt13dV/1zZfDWH6UIo6TnUt13dV.png"
   unsized
   className="relative top-0 left-0 z-0 object-cover w-full"
 />

Results in:

And when you add custom params to the src itself like this:

<Image
    src="renders/1zZfDWH6UIo6TnUt13dV/1zZfDWH6UIo6TnUt13dV.png?blur=40"
    unsized
    className="relative top-0 left-0 z-0 object-cover w-full"
  />

the src is malformatted (2 question marks instead of 1):

Describe the solution you'd like

Ideally you can add custom parameters like this:

import Image from "next/image";

<Image  src="renders/1zZfDWH6UIo6TnUt13dV/1zZfDWH6UIo6TnUt13dV.png" alt="Vercel" options={{ blur: 20, bri: 50, con: 40}}/>

Which should result in a url like this:

https://zerolens-dev.imgix.net/renders/1zZfDWH6UIo6TnUt13dV/1zZfDWH6UIo6TnUt13dV.png?auto=format&w=1200&blur=20&bri=50&con=40

Additional context

Currently, you can't add any custom options at all, not even in the src itself.

[thebuilder]

Yes please. This is stopping us from replacing our custom Image component with Next/Image.
We need features like blur, focal point and cropping options.

An options object would be cool, but otherwise merging the Url parameters set on the src with the injected ones would be fine. I guess it will change between platforms, what options you need, and how they are defined? For Imgix it would be nice if auto could also be customized, by allowing us to override the Next Image value.

[timneutkens]

This is solved by #20216

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.