Images that Zoom
Serve small or blurred images first, then load the real thing after the page loads.
templates/images.html.twig
<img
src="{{ data_uri_thumbnail('images/large.jpg', 40, 30) }}"
{{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
src: asset('images/large.jpg')
}) }}
alt="A blurhash image that is replaced by the real image on load"
width="400"
>
UX Lazy Image
$ composer require ux symfony/ux-lazy-image
$ npm install --force
$ npm run watch