images-and-media

What problem does it solve?

Prevents low-quality, inconsistent, and inaccessible image/media implementations by enforcing senior decisions for format, layout stability, loading, art direction, and photo treatment.

Core Features & Use Cases

• Image format and rendering strategy: Chooses between raster, SVG, CSS gradients, and other media types based on the content and intent (e.g., icons as SVG, photographs as raster).
• CLS-safe layout and responsive art direction: Applies aspect ratio reservation with width/height or aspect-ratio, and uses breakpoint-specific crops via picture/source for better composition.
• Performance and accessibility defaults: Recommends correct loading strategy (eager for LCP, lazy for below-the-fold) and ensures alt text or aria-hidden for every image, plus dark-mode parity and reduced-motion compliance.

Quick Start

Use images-and-media to review and upgrade the media handling in your UI component where you currently render images with <img> or next/image, including aspect ratio, loading behavior, responsive cropping, alt text, and photo treatment.