Images that Zoom
Load fast with Lazy Images
Serve small or blurred images first, then load the real thing after the page loads.
This component is deprecated and will not receive further updates.
Instead, use the modern techniques to improve image loading performance natively supported by all major browsers.
Instead, use the modern techniques to improve image loading performance natively supported by all major browsers.
composer require symfony/ux-lazy-image<img
src="{{ data_uri_thumbnail(legosFilePath, 40, 30) }}"
data-controller="symfony--ux-lazy-image--lazy-image"
data-symfony--ux-lazy-image--lazy-image-src-value="{{ asset('images/legos.jpg') }}"
alt="A blurhash image that is replaced by the real image on load"
width="578"
height="275"
style="border-radius: 5px;"
>
Load a small (or blurred) image first
The real (large) image is downloaded after page load
Install It
$ composer require symfony/ux-lazy-image