Art Direction Per Breakpoint

Art direction is the responsive strategy that goes beyond resizing. A hero image designed for a 1920px desktop canvas does not work at 375px by simply scaling down — the composition collapses, text becomes illegible, and the visual hierarchy disappears. Art direction means creating different compositions for different breakpoints.

Three art direction strategies. Crop: the same image, different crop regions per breakpoint. Desktop shows the full wide composition; mobile shows the center focal point as a tighter crop. This works when the focal point contains all essential information. Recompose: a fundamentally different layout of the same elements. Desktop arranges elements horizontally; mobile stacks them vertically. The content is identical; the spatial relationships change. Simplify: fewer elements at smaller breakpoints. Desktop shows the full data visualization with 8 data points and annotations; mobile shows the top 3 data points without annotations. Content is reduced to what fits, not scaled to what breaks.

For AI-generated assets, art direction means generating variant images per breakpoint — not resizing a single image. The generation prompt for the mobile variant specifies a vertical composition, larger focal elements, and reduced complexity. The style specification remains identical across variants — only the composition adapts.

1. Identify the Art Direction Strategy For each hero/feature image: can the desktop composition survive as a center crop at mobile? If yes, use Crop. If the spatial relationship matters, use Recompose. If there is too much content for small screens, use Simplify.
2. Generate Per-Breakpoint Variants Generate separate images for each breakpoint that requires art direction. Same style specification, different composition prompts. Desktop: horizontal, full complexity. Tablet: moderate reduction. Mobile: vertical, simplified.
3. Implement with picture/source Use the HTML picture element with source media queries to serve the correct variant at each breakpoint. The browser loads only the variant that matches — no wasted bandwidth on images the user will not see.