Any idea how I can achieve a preload effect like this one here?
I try to create such lazy low pixel resolution like they do on this page
https://www.searchsystem.co/
Tumblr
SearchSystem™
SearchSystem™ is an ever-growing collection of references and tools for designers. Curated by Julien...
3 Replies
I think on top of the original image, they have an image that is a lot smaller in size, but scaled up to the larger size. In combination with image-rendering:pixelated on that image it will have a nice pixelated effect. Then with a transition, the top image will disappear
or, now thinking about it, it probably is the otherway around so the larger image has more time to load
Something like this (didn't test)
Here my example of this code
https://codepen.io/MarkBoots/pen/yLqXMPq
does this approach help the page loading speed?
here they use a "data:image/image/jpeg;base64" placeholder
https://maltseva.me/
but I can not really understand which plugin to use for it
Maltseva
Valerie Maltseva
Discover the work of Valerie Maltseva - a commercial and lifestyle photographer based in Vienna, Austria.
probably have a wordpress plugin for that. that inline image is served on pageload, so it doesnt have to make a request for it. Will reduce a bit of loading yes.
Doesnt really matter if you do it in the client.