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™ 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)

<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•2y 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•2y 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.

Gaming

Programming

Any idea how I can achieve a preload effect like this one here?