Progressive Image BundleResponsive images for Symfony, done right.

One Twig component turns any image into a fully responsive, Blurhash-placeholder, zero-CLS, AVIF/WebP-negotiated element — content-addressed and cached forever. No LiipImagineBundle required.

Get Started

Twig Component

View on GitHub

Drop one Twig component into a template. Progressive Image Bundle resolves the source, works out every size your layout actually needs, generates content-addressed variants, and renders a real <picture> element with Blurhash placeholders and zero layout shift — no LiipImagineBundle required.

Twig tag to render

<twig:pgi:Image>, nothing else to wire up

layout shift

width/height reserved via CSS custom properties before load

ways to generate

sync, kernel.terminate, or async via Messenger

AVIF/WebP

content negotiation

served automatically, original kept as fallback

🎨

Blur & Error Placeholders

Every image renders behind a Blurhash placeholder decoded client-side, with a built-in error overlay if the source can't be resolved.

🖼️

Responsive via

Tailwind-like breakpoint selectors ("sm:12 md:6@landscape lg:4@square") compile to a real element with per-breakpoint srcset/sizes.

⚙️

Content-Addressed Variants

Every generated size is identified by an HMAC hash of its source + spec — the same request from any worker produces the same file, with no coordination needed.

🚦

Three Generation Strategies

Generate synchronously in the request, deferred on kernel.terminate, or asynchronously via Messenger — same pipeline, different "when".

🎯

Zero CLS

Aspect ratio and width are reserved via CSS custom properties before the image ever loads, so nothing jumps.

🧩

Built to Be Extended

Swap the storage backend, image engine, post-processors, path resolution or URL generation — every seam is a Symfony service/interface.

Up and running in three steps

composer require tito10047/progressive-image-bundle

That's it — the bundle resolves real dimensions, computes what each breakpoint needs, and generates every variant on first request. Full walkthrough in the Getting Started guide.

Requires PHP 8.3+ and Symfony 6.4, 7.4, or 8.1+.

Coming from LiipImagineBundle?

Every workflow you rely on today has a PGI equivalent — plus the responsive, zero-CLS pipeline Liip never had.

Feature	Progressive Image Bundle	LiipImagineBundle
Standalone URL function (Twig)	pgi_filter()	imagine_filter()
On-the-fly HTTP resolve route	✓	✓
CLI cache warm / remove	✓	✓
Responsive <picture>/srcset out of the box	✓	—
Blurhash placeholder + zero CLS	✓	—
AVIF/WebP content negotiation	✓	—
Real post-processing (jpegoptim/pngquant/cwebp/avifenc)	✓	—
Content-addressed, immutable cache (no cache-busting)	✓	—
Three generation strategies (sync / terminate / async)	✓	—
DDD core with contract tests per extension point	✓	—

Full breakdown and a filter-set migration table in the Getting Started guide.

pgi.blue

Progressive Image, on the blue channel. The bundle spends its time pushing bytes through the R, G and B planes of every image it touches — blue felt like the right home for it: clean, a little technical, no punchline required.

Running in production on mostka.sk and vsetkosada.sk.