Astro
Astro Image
Astro Image is the Image component from astro:assets that resizes and converts a picture during the build. It writes the width and height into the tag so the layout does not jump.
How it is measured
Check the rendered img tag. It should have src pointing to a hashed file in _astro, explicit width and height attributes, and loading and decoding hints. Compare the output bytes against the source file.
Layout shift is the second measurement. Because the dimensions are set before the file arrives, the browser reserves the space. Run a Lighthouse pass and read the cumulative layout shift value for the image area.
Worked example
A hotel site hero is a 5,472 by 3,648 pixel photo of 6.8 MB. The page asks for a 1200-wide WebP. The built file is 96 KB at 1200 by 800, and the tag carries those numbers.
On a phone the same page needs less than 1200 pixels. Adding widths and sizes produces three variants, 400, 800, and 1200, and the phone fetches the 400-wide file at 31 KB.
How it differs
Astro Image is the component for one tag. Astro assets is the module behind it, which also covers CSS imports and the getImage function. Astro Image excludes video, SVG-to-CSS work, and anything under public/.
Common errors
Passing a string path to an image in public/ and wondering why nothing is resized. Omitting alt text. Using a remote image without setting allowed domains. Forgetting that a width on a hero without sizes still serves a large file to phones. Setting loading eager on every image.
In practice
Replace plain img tags on your three heaviest pages with the component and give the top image eager loading. Leave every image below the fold on the default lazy setting. Check the layout shift number before and after.