A paragraph moves downward when an image appears. If the browser cannot establish the image’s aspect ratio beforehand, it lacks reliable information about the space to reserve. Inspect intrinsic dimensions and CSS together.
For a 1200 × 800 example image:
<img src="/images/detail.webp" width="1200" height="800"
alt="Close-up of the fastening" loading="lazy">
img { max-width: 100%; height: auto; }
The attributes must describe the actual aspect ratio. Giving every asset identical placeholder dimensions can produce distortion or an incorrect reserved area.
Observe the initial layout
Disable the browser cache for a controlled measurement and throttle the connection. Observe the image area before the resource finishes loading: its intended space should remain available. Check both narrow and wide views.
When picture switches between crops, one generic ratio may not suit every rendition. Match reserved space to the image actually used. Account for background images and dynamically inserted galleries as well.
Inspect individual layout-shift sources in browser tools. If text still moves, a font, notice or inserted content block may be responsible. These movements also contribute to CLS (Cumulative Layout Shift). The image-size calculator helps plan dimensions; measure observed shifts separately.