Flux ArtThe image arrives, but the button moves
If a button starts below the heading and the whole section drops when the main image loads, first check whether space was reserved for that image. Even complete, sharp visual assets generated with Flux Art do not automatically declare website layout dimensions. This guide addresses page-position changes during loading, not a product being cropped by its container. Preserve the loading sequence, identify what moves and when, and then decide which container to change. A final static screenshot alone cannot establish that the layout is correct.
The element that moves may not be the cause
Text or a button highlighted by a performance tool may simply have been pushed by late-arriving content above it. Observe whether the image container has height before loading and whether that height changes afterward. Then rule out advertisements, embedded content or script insertions. A page can have several sources of shifts. Record the trigger, affected element, page state and timing separately. Without evidence, do not blame all CLS on one image or call a single image-placeholder fix proof of page-wide layout stability.
Width and height provide a ratio, not a complete layout
Setting width and height on an image element to match the actual asset gives the browser an aspect-ratio hint before the image arrives. CSS still manages responsive display, such as a width that follows its container and a proportional height. These attributes are not model-generation parameters or a requirement to use identical fixed pixels on every device. If the declared ratio differs from the image, adjustment may still occur after loading. Use the table below to compare the declaration, container and actual file. Arbitrary numbers are not evidence of a valid placeholder.
| Check | Evidence | If a mismatch appears |
|---|---|---|
| Actual resource | Final candidate dimensions | Correct the basis for the declaration |
| Initial space | Container size before loading | Add appropriate reserved space |
| Space after arrival | Size changes after loading | Find ratio or script adjustments |
| Responsive branches | Each resource and its ratio | Recheck each breakpoint |
| Loading failure | Page layout on failure | Maintain a stable error state |
| Adjacent content | Button and heading positions | Check for pushes from late insertions |
Read the file before calculating reserved space
In an authorized environment, read the final file's actual width and height and check the candidate the page really uses, rather than copying a design-file name. Hypothetically, a 1200×800 image displayed proportionally in a slot 300 units wide needs a height of 200. This is a layout calculation, not a website test or a model specification. If the design requires a fixed square, explicitly make the square container reserve the space and then decide how the image fits inside. Do not declare the original ratio and then have a script change to another height after loading.
Each composition branch needs its corresponding ratio
Different-resolution candidates of one composition can share a ratio, but a separate mobile composition may change it. When using picture or similar branches, check every resource actually selected and how its space is reserved. Modern browsers can use width and height information on source elements, but validation in the target environment is still necessary. Dimensions on the desktop fallback alone do not establish mobile stability. Record both sides of breakpoints, very narrow layouts and maximum container sizes. Do not wait until the image loads to calculate a changed ratio.
Keep the placeholder until the real content takes over
If a skeleton or blank placeholder is removed before the real image is inserted, the page may collapse and expand again. Check the handoff timing so the two stages do not use different heights. Image failure, blocked loading and slow networks also need a sensible stable layout and necessary status information. Do not hide an error permanently just to prevent movement. An invisible image with correctly reserved space is not successful delivery: visible content, loading status and spatial stability require separate checks.
Do not stretch the product to fill a fixed box
Reserving space addresses document layout; rules such as object-fit address display inside that space. They are not one operation. A fixed container may need whitespace or approved cropping, but the product must not be squashed to satisfy a ratio. If a composition change is necessary, preserve the original and obtain separate visual approval. When checking the relationship between buttons, headings and image edges, also confirm that the important product is not obscured. A technically stationary layout does not prove that the visual and marketing information are correct.
Record cold loads, failures and breakpoints
Simulate reasonable slow loading on an isolated page and record positions before and after loading. Then test normal loading, resource failure and breakpoint changes. State the measurement tool's cache settings: a locally cached image may conceal missing reserved space. Preserve CSS and template versions, resource hashes, viewport and observations. The disappearance of a warning is not a substitute for examining the actual sequence. Leave uncovered languages or embedded components awaiting evidence. Recheck affected positions after changing an image, ratio or container.
Reference and platform responsibilities
The web.dev layout-shift guidance was checked on November 8, 2026: https://web.dev/articles/optimize-cls . This checklist is an external website delivery workflow. No customer page was tested, and no claim is made that one fix produces ranking or business gains. Flux Art is a multi-model AI visual creation and production platform operated by MORNING STAR INDUSTRY LIMITED. Visit https://flux-art.net/en . Commercial use is supported. Confirm input-material rights, brand graphics and product facts separately. Once image production is complete, page implementers and reviewers still need to handle the website's space declarations.