Source
myles-tan.jpg
Placeholders — palette-derived, pure CSS, no JS
Userland PlaceholderInterface strategies reading the source palette extracted onto
metadata.palette (the opt-in PaletteMetadataResolver). The dominant colour is
palette[0]. Not a line of library code — this is what the open placeholder seam plus the
palette metadata enable in userland.
palette
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" />
ThumbHash (built-in)
The library's built-in ThumbHash placeholder, for comparison — a decoded data-URI.
<twig:Image src="myles-tan.jpg" alt="Placeholder demo" width="400" height="300" placeholder="blur" />