Picasso Bundle

The missing image component for Symfony, inspired by Next.js Image. Write one line of Twig, get AVIF, WebP, a responsive srcset, blur placeholders and lazy loading.

Get started View on GitHub

composer require silarhi/picasso-bundle

With Picasso
Without

<twig:Picasso:Image src="hero.jpg" width="1920" height="1080" sizes="100vw" alt="Hero" />

<!-- Written by hand… and maintained forever -->
<picture>
    <source type="image/avif" srcset="/images/hero-640.avif 640w, /images/hero-1080.avif 1080w, /images/hero-1920.avif 1920w" sizes="100vw" />
    <source type="image/webp" srcset="/images/hero-640.webp 640w, /images/hero-1080.webp 1080w, /images/hero-1920.webp 1920w" sizes="100vw" />
    <img src="/images/hero-1080.jpg" srcset="/images/hero-640.jpg 640w, /images/hero-1080.jpg 1080w, /images/hero-1920.jpg 1920w"
        sizes="100vw" width="1920" height="1080" loading="lazy" alt="Hero" />
</picture>

One source, every variant

The same photo, 800 px wide, in the three default formats. The browser downloads the first one it supports.

AVIF variant — Rendered by Glide (GD) at the default quality, 75.

WebP variant — Rendered by Glide (GD) at the default quality, 75.

Every format

AVIF, WebP and JPEG <source> tags from your config: browsers pick the lightest they support.

Responsive srcset

Widths for every breakpoint, generated from the sizes prop. How it works

Blur placeholders

LQIP, BlurHash or your own, shown while the image loads. See them

Core Web Vitals

Dimensions read from the source against layout shifts, one priority prop for the LCP image.

Any storage

Local directories, S3 and other Flysystem storages, VichUploader entities, remote URLs.

Local or CDN

Glide on your servers, Imgix, or any CDN through your own transformer.

Where to go next

Quick startA first responsive image in three steps.

How it worksFrom one line of Twig to a served variant.

Serving from a CDNHits never reach PHP, misses render on the fly.

Private imagesThumbnails behind your security voters.