[FEATURE REQUEST] Custom Image Component with Preload Support #777
Description
Background / Context
Our application serves rich media content. Currently, developers manually manage <img> tags, srcset, and preload links, which leads to inconsistent performance and duplicated logic. A standardized <Image> component will provide:
- Automatic generation of
srcsetandsizes. - Consistent handling of lazy loading and decoding.
- Optional preloading during server-side rendering (SSR).
- Integration with our asset pipeline (Webpack-generated URLs).
Acceptance Criteria
-
Responsive Images
- The component must accept
src,width,height, andsizes. - It must generate a valid
srcsetwith multiple resolutions. - It must render
style="width: 100%; height: auto; aspect-ratio: width/height".
- The component must accept
-
Performance Features
- The component must support
loading="lazy"anddecoding="async"by default. - Developers can override
qualityto control image compression.
- The component must support
-
Preload Support
- If the
preloadprop is set, the component must push an entry into a PreloadContext during SSR. - The server must be able to collect these entries and render corresponding
<link rel="preload">tags into<head>. - Duplicate preload links (same
href) should not be added multiple times.
- If the
-
Type Safety & Developer Experience
- The component and context must be written in TypeScript.
- Props must be strongly typed (
src,alt,width,height,sizes,quality,preload). - Errors for missing
altor invalid values should be surfaced during development.
-
Integration with Asset Pipeline
- The component should work with Webpack/Vite-generated URLs (e.g., hashed filenames, responsive-loader metadata).
- It should remain flexible enough to handle both static assets and dynamic image endpoints (e.g.,
/images?src=...&w=...).
Metadata
Metadata
Assignees
Labels
No labels