Is it possible to specify image size and screen width separately?

[kingcw]

so basically if i do test.jpg?resize&sizes[]=300

it will generate a 300px image with screen width 300 in srcSet

<img srcset="test--300.png 300w" src="test--300.png">

This only shows this 300px image if screen width is less than 300, but usually images will only take part of a screen, like 20% of screen width, something like

<img srcset="test--300.png 1024w" src="test--300.png">

Is it possible to define image resize and screen width for srcset separately?

Thank you

[dazuaz]

@kingcw it is not currently possible as it is, since the loader it's only reading from the width parameter.

I am not sure I understand, but you could use object-fit to make a smaller image fill the container.

This only shows this 300px image if screen width is less than 300, but usually images will only take part of a screen, like 20% of screen width, something like

This is why you should use the sizes property, when the device is a phone, images are usually 100% width, and the best image comes straight from the srcset, then let's say a viewport is a desktop and the image is 40%, then the sizes property dictates that after the Desktop viewport width. The browser (modern) will choose the best closest image it finds in the srcset. i.e. A phone with 300px screen and 2x dpi resolution will show the first >600px with image from the srcset.

Not sure If this responds your question, but hope this helps.