Image

Outcome: Use Image to solve this user need without losing the current context. User context: A recipe card saves photo space before loading and uses the right resolution. Its alt text describes useful food details. Recommended pattern: Image. Why it fits: Use an image when it explains, identifies, records, or sets a feeling better than text. Do not use it when: Do not put key text inside images. Avoid huge files, layout jumps, and useless alt text. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): The standard covers only the listed scope. It does not choose the visual style, product decision, or Vibulary example. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.