Weave Code
Ux Lazy Image Laravel Package
symfony/ux-lazy-image
Symfony UX LazyImage makes lazy-loading images simple in Symfony apps. It offers a Twig component for native browser lazy loading, optional placeholders, and performance-friendly rendering that defers offscreen images, reduces initial page weight, and helps improve Core Web Vitals.
Lazy image loader and utilities for Symfony
Frequently asked questions about Ux Lazy Image
- Can I install symfony/ux-lazy-image in a Laravel project?
- Composer may resolve it, but the package is a Symfony UX bundle: it registers on the Symfony kernel, exposes a Twig tag, and depends on symfony/stimulus-bundle. A Laravel app has none of those, so installing it pulls in HttpKernel and the DI container for zero runtime benefit. Treat it as a reference implementation and port the JS controller instead.
- What does symfony/ux-lazy-image actually do?
- It ships a Twig component plus a Stimulus controller that defer offscreen images with IntersectionObserver, with optional placeholder transitions such as blurhash or thumbhash. The PHP surface is thin glue: a bundle class, a Stimulus controller registration, and a Twig extension. Essentially all the real behavior lives in the frontend controller, which is framework-agnostic.
- How do I get the same lazy image behavior in Laravel with Blade?
- Vendor the Stimulus controller source and reimplement the wiring as an Alpine directive (x-lazy-image) or a small data-lazy-src initializer registered in resources/js/app.js under Vite. Then mirror the Twig API with an anonymous Blade component such as x-lazy-image. Budget roughly one to three dev-days for the controller plus Blade component, excluding placeholder work.
- Does symfony/ux-lazy-image work with Alpine.js or Livewire?
- Not out of the box, because the shipped controller expects a Stimulus runtime and data-controller attributes. The underlying logic is portable: rewrite the IntersectionObserver callbacks as an Alpine directive and it coexists fine with Livewire. If you use Livewire, make sure observers are re-initialized after DOM morphs so swapped images still load.
- Is native loading=lazy enough, or do I need this package?
- For the long tail of images, native loading="lazy" plus fetchpriority already delivers most of the benefit and fails open without JavaScript. The package's differentiator is placeholder transitions and a polyfill-free controller, which matters mainly for hero and above-fold imagery. Measure the LCP and CLS delta on your own templates before committing.
- How do I generate blurhash or thumbhash placeholders in Laravel?
- You need a server-side encoder plus a place to persist the hash, such as a media model column, a media library field, or a CDN edge transform. That pipeline and its backfill typically run two to five dev-days and cost two to three times the frontend wiring. If a solid background-color placeholder is sufficient, you likely do not need this package at all.
- Which Laravel and PHP versions does the portable approach support?
- The vendored controller plus Blade component path is version-agnostic and works on Laravel 11 and 12 with PHP 8.2+ and Vite. Your real constraints are the frontend stack and whether you use Alpine or Livewire, not the Laravel release. The Symfony package itself requires Symfony components and Twig, which is why it is a non-fit.
- Is symfony/ux-lazy-image maintained and safe to depend on?
- It is MIT-licensed, thin, and low-churn, so breakage risk and security surface are both small. It sits in a low-traffic corner of the Symfony UX monorepo, so bus factor is a real but bounded concern. Vendoring the controller with an attribution header and a pinned commit reference neutralizes that risk entirely.
- How do I test and measure the LCP improvement from lazy image loading?
- Run a Lighthouse or WebPageTest A/B against native loading="lazy" on your actual templates, with a hard kill criterion defined before the spike starts. Check the no-JS and reduced-data fallback, since a lazy loader that fails closed is worse than native attributes that fail open. Also note the minified transfer size of the controller you vendor.
- What are the alternatives to symfony/ux-lazy-image for Laravel?
- Native loading="lazy" with fetchpriority, vanilla-lazyload, lazysizes, or a short custom IntersectionObserver directive in Alpine. Most Laravel apps get the best value from native attributes for the long tail plus a small custom controller for hero imagery. All of these avoid pulling Symfony HttpKernel into a Laravel application.
Weaver
How can I help you explore Laravel packages today?