Images that Zoom
Load fast with Lazy Images
Serve small or blurred images first, then load the real thing after the page loads.
composer require symfony/ux-lazy-image
<img
src="{{ data_uri_thumbnail(legosFilePath, 40, 30) }}"
{{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
src: 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
$ npm install --force
$ npm run watch