image-medialisted

# Images and media Images are usually the largest bytes on a page, the most common cause of layout shift, and the most common accessibility gap. All three are fixable with attributes. ## Always set dimensions `width` and `height` attributes (or an `aspect-ratio` in CSS) let the browser reserve the box before the file arrives. Without them, the layout jumps when it loads — this is the single most common CLS cause, and it costs one attribute pair to avoid. The attributes set the *intrinsic ratio*; CSS still controls the rendered size. `width={800} height={600}` plus `style={{ width: '100%', height: 'auto' }}` gives a fluid image with a reserved box. ## `alt` is a decision, not a formality - **Meaningful image** → describe **the information it conveys in context**, not the picture. A product photo in a listing is the product name; the same photo on the product page, where the name is already a heading, may be decorative. - **Decorative image** → `alt=""` (empty, present). Omitting `alt` entirely makes some screen readers announce the filename, which is worse than silence. - **Image inside a link or button** → the alt text carries the link's accessible name. `alt=""` on the only content of a link produces an unnamed link. - **Image of text** → the alt must contain the text verbatim. Better: do not ship text as an image. - **Complex image** (a chart, a diagram) → a short `alt` plus a longer description nearby or linked. A chart's alt should carry the *finding*, not "bar char