Image loader format

[red mauve]

The documentation for the images.formats config option states

The default Image Optimization API will automatically detect the browser's supported image formats via the request's Accept header.

how can i leverage this in a custom loader? there's no prop for the format, only src, width and quality

export default function myImageLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

[ornate briar]

Hi @red mauve. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information provided in the extracts, the loader function in Next.js currently only accepts src, width, and quality as parameters. There is no direct way to access the image format or the browser's Accept header within the loader function.

However, a solution proposed in a Github issue (https://github.com/vercel/next.js/issues/50764) suggests introducing a new prop, loaderParams, that can be read from the loader function. This could potentially be used to pass additional parameters to the loader function, such as the image format. Here's how it might look:

export default function myLoader({ src, width, quality, params }) {
  return `<https://example.com/{src}?w=${width}&amp;q=${quality}&amp;foo=${params.foo}`>
}

Please note that this is a proposed solution and may not be currently available in Next.js. For the most accurate and up-to-date information, please refer to the official Next.js documentation or their Github repository.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@red mauve kapa.ai is still learning and improving, please let us know how it did by reacting below