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
MarkBoots
MarkBoots2y ago
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)
<div class="image-container">
<img src="small-image.jpg" class="small">
<img src="large-image.jpg" class="large">
</div>
<div class="image-container">
<img src="small-image.jpg" class="small">
<img src="large-image.jpg" class="large">
</div>
.image-container {
display: grid;
aspect-ratio: 16/9; /* ratio or size of image */
}
.image-container > img {
grid-area: 1/1;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container > img.small{
image-rendering:pixelated
}
.image-container > img.large{
opacity: 0;
animation: reveal-large-image 250ms ease forwards;
animation-delay: 1000ms;
}
@keyframes reveal-large-image{
to{
opacity: 1
}
}
.image-container {
display: grid;
aspect-ratio: 16/9; /* ratio or size of image */
}
.image-container > img {
grid-area: 1/1;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container > img.small{
image-rendering:pixelated
}
.image-container > img.large{
opacity: 0;
animation: reveal-large-image 250ms ease forwards;
animation-delay: 1000ms;
}
@keyframes reveal-large-image{
to{
opacity: 1
}
}
Here my example of this code https://codepen.io/MarkBoots/pen/yLqXMPq
pixelcrash
pixelcrash2y ago
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.
MarkBoots
MarkBoots2y ago
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.
Want results from more Discord servers?
Add your server