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

templates/ux_packages/lazy-image.html.twig

<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

A blurhash image that is replaced by the real image on load

Install It

$ composer require symfony/ux-lazy-image