Switch to background-image for placeholder image

[felixranesberger]

Hi Johann, when using a ThumbHash that doesn't match the exact width and height of the output image,
a CLS does occur, because the decoded URI has different dimensions.

I'm facing this exact issue, because of performance reasons, I can't generate a new ThumbHash for each new image crop variant.

Would it be possible, to switch from setting the data-uri on the src attribute, to using a background-image solution?

A solution could look something like this:
(src="#" causes W3C-Validator to succeed and avoids unnecessary 1px placeholder image)

<img
        src="#"
        data-sizes="auto"
        loading="lazy"
        sizes="445px"
        srcset="..."
        width="800"
        height="450"
        style="
            background-image: url('placeholder.jpg');
            background-size: cover;
            background-position: center;
        "
>

If this approach is fine with you, I would love to provide a pull request for the feature.

[felixranesberger]

A solution could look like this:

// Generate the blurry placeholder from a Blurhash or ThumbHash string if applicable
if (__ENABLE_HASH_DECODING__ && hash) {
    const placeholder = createPlaceholderFromHash({
        image,
        hash: typeof hash === 'string' ? hash : undefined,
        hashType,
        size: placeholderSize,
    })
    if (placeholder) {
        image.style.backgroundImage = `url('${placeholder}')`;
        image.style.backgroundSize = 'cover';
        image.style.backgroundPosition = 'center';
    }
    
    ...
}

[felixranesberger]

We would also have to adjust the documentation, so that every user makes sure, to add a src="#" to the implementation.

[johannschopplich]

Thanks for the input! Using src="#" will neither be accessible, nor a proper SEO-ready implementation. I don't think that's a good idea.

Regarding the CLS, have you read the unlazy docs on aspect-ratio? (Should be retitled to properly refer to layout shifts, tho.) If the width and height of your image is known, as is the case for most CMS, you can calculate the ratio and inline it as aspect-ratio. In my opinion, it's the superior solution to using a background image.