Surely the only units that should be used for an image width are pixels and percentages and not font size related sizes such as em, rem, ch

in your example you have different images for each size but they dont have a specific alt description

Thanks for looking

Surely the only units that should be used for an image width are pixels and percentages and not font size related sizes such as em, rem, ch

The units are not for the image but for the pre-calculation of how much space the image will take (I've update the first post with additional information like sizes documention)

in your example you have different images for each size but they dont have a specific alt description

I've added different images to make it more clear, that it changes, but the idea is, that this is a responsive solution, so to use the same image in different sizes.

Thanks for looking

Surely the only units that should be used for an image width are pixels and percentages and not font size related sizes such as em, rem, ch

The units are not for the image but for the pre-calculation of how much space the image will take (I've update the first post with additional information like sizes documention)

ah ok - i see that the size is for the container size not the image size - i missed that before

in your example you have different images for each size but they dont have a specific alt description

I've added different images to make it more clear, that it changes, but the idea is, that this is a responsive solution, so to use the same image in different sizes.

As you can use a different image (even if it wasnt the intent) then they should each have their own alt description

As you can use a different image (even if it wasnt the intent) then they should each have their own alt description

That's not possible, it's one img tag with different srcset. If someone wants to use different images, they need to create different banners.

I was try to test this. By try & error I was able to set the image banners/white.png for smaller mobile and banners/shop-ad-books.jpg for larger desktop by configuring min width 400px and Container Width 50vw. But many other combination are not working. I do not understand, why a container needs to be configured and which values are to be used. Is that more confusing the users?

similar experience here

also it would be better if the dimensions fields were entered with the image

right now it is possible to create more images than you have sizes and more sizes than you have images

You're aware, that this is a html standard and it's ok, to have more images as sizes and the other way around. The srcset tells the browser which images are available and the sizes tells the browser how the site behaves. So the browser can then easily determines which images is the best fit for the current resolution.
It takes not only the image size into account but also e.g. retina display and so on.
The linked moz documentation explains is nicely, but there are many tutorials out there, too.
Took me also a while to understand, that srcset is completely independent from the sizes. It's more like a decision matrix.

You're aware, that this is a html standard and nothing I invented or decided how it works. It's ok, to have more images as sizes and the other way around. The srcset tells the browser which images are available and the sizes tells the browser how the site behaves. So the browser can then easily determines which images is the best fit for the current resolution.
It takes not only the image size into account but also e.g. retina display and so on.
The linked moz documentation explains is nicely, but there are many tutorials out there, too.
Took me also a while to understand, that srcset is completely independent from the sizes. It's more like a decision matrix.

I have setup the banner exactly as shown in the instructions and no matter what the browser size I always get the same banner image

Did you use the mobile inspector, there it does not work for me. I had literally to resize the whole browser.

I resized the browser and reloaded the page each time