Cookies publicitaires

Nous utilisons des cookies publicitaires pour mesurer l'efficacité de nos campagnes. Vous pouvez les refuser sans que cela affecte votre navigation. En savoir plus

Resources · Blog

Avoiding CLS on product galleries when sizes are generated on the fly

Why reserving space for dynamically generated gallery images prevents layout shift, and where the risk differs from static files.

Ruler icon representing reserved image dimensions to prevent layout shift September 12, 2026

Cumulative Layout Shift (CLS) happens when a browser starts laying out content before it knows an image's real dimensions, then has to move surrounding elements once the image finishes loading. With a static file, developers often hardcode width and height once and forget about it; with images generated on demand by a preset, that habit is easy to drop because the file did not exist yet when the template was written.

The browser only needs the intrinsic width and height attributes, or an equivalent aspect-ratio in CSS, to reserve layout space, it does not need the final image bytes. An ImagePipe preset fixes those dimensions in its configuration regardless of the resize mode applied (Fit, Cover, Crop, Contain, Stretch), so the rendered size is known in advance even before a given variant has ever been generated, and there is no technical reason to omit those attributes.

The failure mode specific to on-demand generation is a gallery template that only writes dimensions into the markup after the file exists, or a thumbnail loop that falls back to no dimensions when a variant has not been generated yet. The first request for a given size is precisely when the browser has the least information, and precisely when a visible shift is most likely.

Check first that every img tag produced by the gallery template carries explicit width and height matching the preset's configured dimensions, not the source file's. Check next, with Chrome DevTools' Rendering tab and "Layout Shift Regions" enabled, whether a cold-cache reload still triggers a visible shift. Finally, confirm the theme's CSS does not override those dimensions with a conflicting width: auto rule.

Back to blog