PicassoBundle showcase
A live demo of the silarhi/picasso-bundle Symfony package — the image component that was missing from the Symfony ecosystem.
Every image below is rendered through the same Twig component: <twig:Picasso:Image>.
The bundle takes care of generating a full <picture> element with AVIF and WebP sources,
a JPEG fallback, responsive srcset, auto-detected dimensions and a blur placeholder inlined
as a CSS background-image.
The transformer used in this project is Glide running locally with the GD driver,
and signed URLs to prevent abuse. Transformed image variants are cached under
var/picasso-cache/.
Responsive grid with sizes
Three images laid out in a Bootstrap grid. The sizes attribute is forwarded to the component,
and the srcset is generated automatically from the breakpoints configured in
picasso.yaml.
Responsive grid
One line of Twig, and you get a <picture> element
with every format and every size variant.
Responsive grid
One line of Twig, and you get a <picture> element
with every format and every size variant.
Responsive grid
One line of Twig, and you get a <picture> element
with every format and every size variant.
Different fit modes
The same source file rendered with three different cropping strategies.
fit="contain"
fit="cover"
fit="crop"
Priority image (LCP)
With :priority="true", the image is loaded with loading="eager" and
fetchpriority="high". The blur placeholder is automatically disabled since it would
only slow down the first paint. This is the mode you want for a hero banner.
Individual overrides
Two examples showing per-image overrides: a custom quality setting on the left, and an image with its blur placeholder explicitly disabled on the right.
Quality set to 40% (:quality="40")
No placeholder (:placeholder="false")
