When using the picture tag with srcset, I can specify different image sources based on viewport widths.
However, what I really need is to define image sources based on the actual width of the space the image occupies after the page has been rendered by the browser.
For instance:
Viewport width is 1920px and website uses a container size of 1200px
The container is divided into two columns of 600px each
- The second column contains an image set to 100% width, resulting in a width of 600px
- The srcset for the image offers options of 400x300px, 800x600px, and 1200x900px
- The browser should automatically select the 800x600px image
If it's guaranteed that the image will always occupy the same space, I could use srcset based on viewport width.
Unfortunately, my site's design allows content editors to freely add columns/rows and nest them. Additionally, columns may collapse at some point and become full-width. This makes it impossible for me to predict how much of the viewport width an image will ultimately receive during rendering.
Therefore, I would like the browser to assess the actual pixels the image occupies when presented to the user and choose the appropriate image accordingly.
I have conducted thorough research but haven't found any information on this specific issue.
Is this even feasible?
Or would the only solution involve Javascript?