#128
srcset and sizes
An Image with a two-rendition `srcset` (400w and 800w) and a `sizes` hint, in a 420px wrapper.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "srcset and sizes" pattern (@codeatlasdev/ui demo #128, display/image) in my app.
Call get_demo({ ids: ["#128"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Responsive content images where the browser should pick the smaller file on narrow screens.
Keep these library parts, with the props and tokens the demo uses:
- Image from "@codeatlasdev/ui"
Behaviour to keep:
- `srcset={`${small} 400w, ${large} 800w`}` lists two renditions
- `sizes="(min-width: 768px) 420px, 100vw"`
- `src={large}` with `width={800}` and `height={450}`
- `alt="Two renditions of the same 16 by 9 picture"`
- Wrapper is `<div style="max-width: 420px">`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Image
@codeatlasdev/ui
How it is built
- `srcset={`${small} 400w, ${large} 800w`}` lists two renditions
- `sizes="(min-width: 768px) 420px, 100vw"`
- `src={large}` with `width={800}` and `height={450}`
- `alt="Two renditions of the same 16 by 9 picture"`
- Wrapper is `<div style="max-width: 420px">`
Related
Loading source.