Sizing images for fluid containers that change with the layout

What was reported: Issue imgix/imgix.js#117 (closed, 6 comments): the reporter had a fluid-width container whose size depends on surrounding content, not just viewport breakpoints, and asked how imgix.js could react to it. The maintainer explained imgix.js only populates the img srcset attribute (widths from 100w to 2560w in 100w steps) and lets the browser pick the URL. The answer: compute the desired size in JS and write it to the sizes attribute.

What works: imgix.js does not watch your layout; all it does is fill the img srcset with a range of widths (100w to 2560w in 100w steps) and let the browser choose. For a container that changes size with its content, compute the rendered width in JS whenever the layout changes and set that as the image sizes attribute. The browser then picks the closest srcset URL, and already-cached widths keep working as long as sizes stays accurate.

In the GitHub issue, the reporter asked: Sizing images for fluid containers that change with the layout. The working answer that came out of the thread: imgix.js does not watch your layout; all it does is fill the img srcset with a range of widths (100w to 2560w in 100w steps) and let the browser choose. For a container that changes size with its content, compute the rendered width in JS whenever the layout changes and set that as the image sizes attribute. The browser then picks the closest srcset URL, and already-cached widths keep working as long as sizes stays accurate. Source: https://github.com/imgix/imgix.js/issues/117