Images without explicit width and height attributes have no reserved space until they load, so surrounding content jumps — that jump is Cumulative Layout Shift (CLS), a Core Web Vital.
How to fix it
- Always emit intrinsic
widthandheightattributes; the browser derives the aspect ratio and reserves the box. Shopify'simage_tagdoes this for you. - Use CSS
aspect-ratioorheight: autoso the image scales responsively while keeping the reserved ratio.
<img src="..." width="1500" height="1000" style="height:auto" alt="...">