Suggest making the next/image component accept explicit source set?

[ItsRyanWu]

Describe the feature you'd like to request

I would like to optionally abandon automatic responsive image optimization provided by Next.js and set source set by my own, the reason is that the CMS I'm going to connect to already provides the image source and source set that it generates, and they are already hosted on CDN.
In the meanwhile, I'm greedy so I still want to keep features like placeholder auto switching and image lazy loading etc that the next/image provides as they are awesome.

Describe the solution you'd like

I tried to mark the image component as unoptimized: true and pass explicit srcSet to next/image but it seems the explicit srcSet is not supported currently. I hope it works.

Describe alternatives you've considered

Is it a good idea to make srcSet accept explicit source set?

[timfuhrmann]

Similar feature request regarding custom image loader: #35016

[ItsRyanWu]

Similar feature request regarding custom image loader: #35016

Hi, I have looked into your feature request but I'm not quite understand why would you think these 2 feature requests are similar.
My first question is can the image loader be a workaround in my case to manually assign srcSet to next/image component? I have gone through docs everywhere but didn't realize a custom loader would be helpful.
From my understanding, the custom loader can only be used to assemble URL strings so it could only be helpful for cases where you want to pass some parameters related to resolution and quality to the original image server right? Even if I get the image file according to the parameters from the original image server, the Next.js server still have to convert it by itself to multiple resolution versions on demand at request time. Is there any workaround for me to bypass this step and explicitly assign multiple resolution sources to the next/image?

[timfuhrmann]

I see, misunderstood your question sorry. If you're trying to skip the custom image loader and apply a pre-generated string for src and/or srcSet yourself, you can't do so with what I had suggested, you're right.

[ItsRyanWu]

I see, misunderstood your question sorry. If you're trying to skip the custom image loader and apply a pre-generated string for src and/or srcSet yourself, you can't do so with what I had suggested, you're right.

No worries, so far it seems either I need to fork the 'next/image' component and implement a feature patch or build a custom image component from the ground up.

[eliawk]

how did you fix this?

[Nerdy-Mike]

Hi @ItsRyanWu, did you implement the next/image to fix the srcSet problem? Would you mind to share the repo ?

Thank you 👍

[karlhorky]

Seems like more control over srcSet is a common request:

• Image component does not generate accurate srcsets #37265
• srcSet ignores sizes provided #27547
• Add support to Next/Image to specify a subset of device and image sizes to reduce srcset bloat #41731

[mortennajbjergjp]

Another scenario where this could be relevant:

We have our own image proxy for handling image resizing.

This proxy requires credentials that we do not want to expose to the user client so we would like to pass need to generate a predefined srcset definition server-side.

Providing our own explicit source set to our next/image's will solve this issue.

[aandriamanga]

It is very usefull to have an srcSet props directly on next/image.

Because the management of responsive images is not only limited to the size but also the fact that we can have different images for different screen sizes.

For now this is our usecase and next/image doesn't permit this :(
We are forced to use an img html classic element.

So please @leerob, take note on this to feature request.

It's very usefull and helpfull.

I hope it will be supported soon. 🙏

[nbalaguer]

Hi! I have a simmilar use case.

In the project I'm working on, several image resizes are generated ahead of time when the user uploads an image to the CMS. We tried to hack a solution by specifying an array of deviceSizes in the next.config with the known image widths we generate and then using a custom loader that simply returns the url for each received "device" size (image resize width) so next generates a proper srcSet for the image. In the end we discarded that solution because since we're deriving each image resize url from the src and width received by the loader, one of the urls is equal to the received src and next shows a warning (see below), and it also felt too hacky.

next.js/packages/next/src/shared/lib/get-img-props.ts

Lines 522 to 527 in 13af19a

	if (urlStr === src || (url && url.pathname === src && !url.search)) {
	warnOnce(
	`Image with src "${src}" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.` +
	`\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width`
	)
	}

Right now, if a next/image is unoptimized, it eats the user sizes prop in this part of the code:

next.js/packages/next/src/shared/lib/get-img-props.ts

Lines 204 to 206 in 13af19a

	if (unoptimized) {
	return { src, srcSet: undefined, sizes: undefined }
	}

When trying to test the unoptimized approach, we found another hacky way to get the srcset and sizes attributes through next/image. It turns out that javascript is case-sensitive, but HTML is conveniently case-insensitive, and since next/image simply {...rest}'s all the unknown props to the <img> element, I can set the srcset attribute by using a "srcset" prop (instead of next/image's srcSet prop which is forced to undefined if unoptimized is true), and I can also set the sizes attribute in the image by using "siZeS" as a prop. Any random variant of the attributes with some uppercase letters will work.

I don't like this "solution" since I cannot assume that bypassing next/image's internal logic will result in 0 errors now and in future versions of the component, and a proper way to set custom srcset and sizes would be ideal.

[owenhoskins]

Hello all,

I am using Next.js + Sanity.io and I've found a solution in the package next-sanity-image by @lorenzodejong.
I believe the logic in this hook could be used as a reference for writing something similar for other CDNs etc.

best,
O

[lorenzodejong]

@owenhoskins the next-sanity-image package actually leans on dynamic generation of Sanity CDN URL's.

Sanity allows dynamically resizing by setting query parameters on the request URL. For example: '?w=100&h=50' yields into an image resized to 100x50. It does so based on the configured 'sizes' in the next.config.js

This does seem inherently different from the approaches the other replies are leaning towards, where a predefined srcSet is passed to the next/image component as-is.