Images that Zoom

Load fast with Lazy Images

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"
>
Load a small (or blurred) image first
The real (large) image is downloaded after page load
Symfony logo

UX Lazy Image

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

Install It

$ composer require ux symfony/ux-lazy-image
$ npm install --force
$ npm run watch

Symfony UX Lazy Image Docs

Get going with the official documentation.