# Responsive Image QA

Run rendered QA whenever visual assets affect a visible surface.

## Minimum Checks

- Desktop screenshot at a representative wide viewport.
- Mobile screenshot at a narrow viewport.
- No horizontal overflow.
- No unintended clipping, overlap, or bleed.
- Hero and detail media do not create excessive scroll.
- Text remains readable over images or texture at the exact rendered placement.
  Check whether letters cross complex shapes, similar-value colors, map lines,
  props, faces, or high-contrast texture. If they do, repair with crop/position,
  a local translucent reading field, or a deliberate overlay.
- Important text is at least 16px unless the format genuinely requires smaller
  labels.
- Images load without broken paths.
- Alt text exists and matches image purpose.
- Width and height or stable aspect ratio are defined.
- Lazy/eager loading is intentional.
- Reduced motion is respected when assets animate.

## Crop Checks

- Important subject remains visible on mobile.
- Proof details are not cropped out.
- Backgrounds do not hide UI controls or text.
- Text-safe negative space remains text-safe after responsive cropping and image
  repositioning.
- Right-side hero art stays within the designed hero height.
- Repeated images are intentional and limited.

## Publish Checks

- Verify the actual destination repo/path before pushing.
- Smoke-test public URLs after publish.
- Check cache-busted URLs when recent changes may be cached.
- Confirm the public surface has no placeholder labels, prompt notes, source
  scaffolding, or draft-only text.
