Reserve the shape before optimizing the file
Image stability starts with predictable geometry. Give the browser the intrinsic dimensions or an aspect ratio that matches the intended crop. Then use responsive sizing so the reserved box adapts to its container. File compression and lazy loading solve different problems; neither alone prevents layout movement. Review logos, card thumbnails and hero images separately because their cropping and loading requirements differ.
Worked example
Illustrative scenario; not a claim of measured client results.
Imagine a three-column project grid with mixed landscape and portrait photographs. Standardize the card image frame and choose an intentional crop, rather than letting each image determine the row height after loading. At mobile width, retain the same ratio while reducing the rendered width. Confirm that an important face or product detail is not cut out by the chosen crop.
Checks, limitations and next decisions
To diagnose movement, test with delayed image loading and observe nearby text and controls. If dimensions exist but movement remains, investigate fonts, injected banners or changing containers. Check image sharpness on a high-density screen without automatically sending the largest original to every device. Keep the primary visible image eligible for prompt loading and defer images farther down the page only after checking the actual layout.
A practical starting point
Work through these checks in order. Use the results to decide what needs to change in your own workflow.
- Set intrinsic width and height or a reliable aspect ratio.
- Serve an appropriately sized image for the rendered container.
- Test slow loading to see whether text and buttons shift.
A mistake to avoid
Avoid lazy-loading the main above-the-fold image without checking the loading impact.
How to check progress
Observe layout shift and verify image sharpness at common screen widths.
Your action checklist
Use this checklist while reviewing your own setup. Checkmarks are temporary and stay in this open page.
For the wider decision process, read Diagnosing a page that Google has not indexed.
Further reading
Official background resources for this topic. The workflow above is general guidance, not a guarantee of a particular result.
AI-assisted editorial content. Examples are illustrative, not client case studies. Read our editorial policy or report a correction.