Progressive Image Loading Could be Refined

[dav-is]

The first image loaded that is small could be smaller. If you don't blur it you could probably get away with it being smaller, then blur it with CSS. That way you could also add a transition for a smooth unblur.

[tirthbodawala]

@dav-is thanks for opening the issue, we already have the provision for that. If we add '?placeholder to any image we import, it will present us with very small version of it. Let me add this to my todo of examples.

Thanks

[dav-is]

I’m worried you misunderstood. The placeholder images in your prior examples are blurred in the image, not CSS. And there is no Transition once the full image is loaded.

[tirthbodawala]

@dav-is ohh I see.. absolutely a transition would be good and yes I added the wrong example, if one uses
‘’’
Import AbcImage from “./abc.png?sizes=100w+200w&lightweight”
‘’’

This will give you a really small version of image. So we will then implement a transition with css! That would be more UX friendly.

Will definitely implement that.

[ghost]

Just gonna lob this in here as food for thought. https://images.guide/

[tirthbodawala]

Thanks @jhabdas that is very helpful. Thank you so much

[tirthbodawala]

@dav-is @jhabdas check this PR and https://react-pwa.now.sh/progressive-image-rendering
for implementation of progressive image with lightweight, I might not have got it 100% right, but you guys can share examples where I can make it even better. :)

[ghost]

Progress makes perfect! Thanks for all you do @tirthbodawala

[dav-is]

I did some testing and I don’t see any transition or blur.

[tirthbodawala]

@dav-is Right, I haven't added any transaction, I have just used lightweight with placeholder. Can you please share any example where I can understand the functionality you are looking for ?

[dav-is]

picture {
    filter: blur(25px);
    transition: blur .5s;
}
picture.is-loaded {
    filter: none;
}

When the full picture is loaded, add the .is-loaded class.