Design-system mode
Shared Defaults
ImageConfigProvider sets app-wide defaults while still allowing component props to override them.
Provider defaults
Use this near the app root to keep placeholder, color, animation, and lazy settings consistent.
BackgroundImage inherits it
<ImageConfigProvider
value={{
placeholder: 'skeleton',
duration: 850,
fadeType: 'soft-reveal',
easing: easings.cinematic,
skeleton: {
baseColor: '#111318',
highlightColor: '#242936',
accentColor: 'rgb(255 61 129 / 38%)',
speed: 1100
}
}}
>
<Image src="/images/home/feature1.jpg" alt="Provider image" width={720} height={480} />
<BackgroundImage src="/images/home/feature2.jpg" width="100%" height={220}>
<h3>BackgroundImage inherits it</h3>
</BackgroundImage>
</ImageConfigProvider>Try the full demo
Open the focused Provider defaults playground for the wider controls and live output.