[Doc] Add a warning message to not recommend Lazy Image package

[javiereguiluz]

Q	A
Bug fix?	no
New feature?	no
Issues
License	MIT

Related to #2004. If we don't deprecate the package, at least warn users that it's no longer recommended. Thanks.

[Kocal]

Thanks Javier for the suggestion.

I'm a bit conflicted, because for me, modern techniques for improving image loading and BlurHash aren't really the same thing:

• On the one hand, we prefer to play with early hints, lazy-loading, loading priorities, in order to improve performances (and CrUX)
• but on the other hand, it is possible to use BlurHash to improve the user experience by displaying a (blurred) image instead of nothing at all.

I already documented how we can use UX LazyImage for the LCP image in #1967 and I still believe it is enough. Maybe we should cover other topics?

WDYT?

Thanks!

[javiereguiluz]

You are right. But at the same time, a few years ago it was common to see these image blurs while they were loading. Today, I can't remember the last time I saw one.

Maybe this is my own bubble so I'm asking: do you know any big and/or popular site that still uses this technique? Thanks.

[Kocal]

Maybe this is my own bubble so I'm asking: do you know any big and/or popular site that still uses this technique? Thanks.

... not at all! 😅

Apparently, Mastodon used to use it (https://github.com/woltapp/blurhash#users), but I don't see where.

Anyway, to mee BlurHash was always more a "smartphone" thing than a "web" thing.

At least, maybe we can reword your suggestion by telling that using UX LazyImage is not recommended for performances but only for user experience?

[smnandre]

I'm for deprecating the package.

Starting from the documentation here:

It provides two key features:

a Stimulus controller to load lazily heavy images, with a placeholder
a BlurHash implementation to create data-uri thumbnails for images

Stimulus controller

This part is obselete today.

The source HTML we suggest is the following

<img
        src="[data:image/jpeg;base64,/9j/4AAQSkZJ[...]"
        data-controller="symfony--ux-lazy-image--lazy-image"
        data-symfony--ux-lazy-image--lazy-image-src-value="/assets/images/legos-FTSkITj.jpg"
        alt="A blurhash image that is replaced by the real image on load"
        width="578"
        height="275"
        style="border-radius: 5px;"
    >

What was a good idea years back is now... less than good. On many levels (SEO, accessibility) but it's above all very counter-productive, working against the browser and its asset priority algorithms, forcing it to render one image then a second... without using all the srcset / dimension / formats optimizations.

Blurhash

I can understand the visual impact on specific use cases. But this is not about loading then, it's about visual effect, style, mood.

Technically, a CSS/SVG radial gradient with a blur will give you the same result, without the need for complex image computations, cache, heavy pages. It requires 2 CSS vars per "card" (worst case scenario).

And no activity for a while on the most popular blurhash repository: https://github.com/woltapp/blurhash .. probably a good sign to leave it to the past :)

Personal conclusion: it's more than time to deprecate the package (or at least publish a warning on it a suggested by @javiereguiluz here 👍 )

---

If only we had more hands.... 🙏 There is so much we could do about images, CSS, SVG... to have a major impact on performances, and UX...

[smnandre]

Well, this is right on time : https://developer.mozilla.org/en-US/blog/fix-image-lcp/#resource_load_delay

LGTM, but can we discuss then something a bit more ... radical ?

[Kocal]

Thank you @javiereguiluz.