Placeholders
What the reserved box shows before the image paints. The library ships a catalog (blur,
thumbhash, blurhash, none); a technique of your own is a
PlaceholderInterface registered under a token with the bundle's placeholders: key.
This demo's four read the palette extracted onto metadata.palette or inline a tiny variant;
none is library code. Anything else is a raw CSS background.
Built in
blur
The default technique, an alias of thumbhash.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="blur" />
ThumbHash
A ~25-byte hash of the image, decoded to a tiny PNG data URI behind the image.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="thumbhash" />
BlurHash
The BlurHash algorithm, decoded the same way: softer, no alpha.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="blurhash" />
none
No placeholder at all: the reserved box stays empty until the image paints.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="none" />
Custom
Dominant colour
The most populous palette colour (palette[0]) as a solid background.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="color" />
Palette gradient
The top palette colours blended into a linear gradient.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="gradient" />
Palette mesh
The palette as layered radial gradients — a soft abstract blur, pure CSS.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="mesh" />
LQIP
The same chain 24 px wide, blurred and inlined through the provider's inline door: local providers only.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="lqip" />
Raw CSS
A CSS background value
Any value that is not a catalog token is a CSS background, written by hand.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="linear-gradient(135deg, #f6d365, #fda085)" />