Next.js Image – Set format for specific img / url

Question

The Next.js image component is normally choosing the best possible format for an images (avif, webm etc.) by accepted format-types of the browser. In my case i need to have the best possible format (avif) for most images except some gallery images that need to be jpeg.

I tried to set the format (jpg) for a specific image/url but nothing worked yet.

Is there a possibility to specify the format. Like a query for the optimization "/_next/image?url=" + img-url + "?fm=jpg" or something like that? Or a special way in the next/config?

Answer 1

There is an unoptimized setting that can be configured globally or per image (https://nextjs.org/docs/api-reference/next/image#unoptimized).

Answer 2

You can use a custom loader for images that need to be in a specific format. If you combine this with a service like Imgix you can still request specific image sizes/crops/etc for your assets.