Sizing images for fluid containers that change with the layout

TL;DR

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.

Steps

1. 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.

2. 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.

When to use

You are seeing this: 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. Use this skill when you run into "Sizing images for fluid containers that change with the layout".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Why this happens

The original report does not dig into a root cause. It documents the symptom and the fix that resolved it.

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