Achieve Max Performance loading your images with v-lazy-image

Most likely you already know how to use v-lazy-image, even using responsive images to load the best image size based on the viewport's size. If you don't, I suggest you to do it now.

Have you ever been reading a blog on Medium and see this cool loading image effect as you scroll down an article?

That's Progressive Image Loading, a performance technique that Medium, Spotify and Netflix (among others) use to improve the user experience when lazy loading an image.

Note that it's a perceived performance technique, meaning that the image won't be loaded quicker. Instead, you'll load a tiny version of the image and make the switch to the real one.

That improves considerably the UX (User eXperience). The user will perceive the image load is smooth and you'll avoid the user to wait seeing a blank space until the image is loaded, accompanied by a CSS transition.

If you're more interested on the different kind of performances, I talk in more detail in my Vue Day's talk, but let's go to the point.

# Progressive Image Loading in v-lazy-image

As simple as using the src-placeholder property to define an image that is shown until the src image is loaded.

Make sure the placeholder image is a tiny version of the original one. If you host your images in Storyblok, that's pretty easy to achieve with the Image Service since it allows you to resize images on the fly.

When the src image is loaded, a v-lazy-image-loaded class is added, so you can use it to perform animations. For example, a blur effect:

<template>
  <v-lazy-image
    src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
  />
</template>

<style scoped>
.v-lazy-image {
  filter: blur(10px);
  transition: filter 0.7s;
}
.v-lazy-image-loaded {
  filter: blur(0);
}
</style>

You can listen to the intersect and load events for more complex animations and state handling:

<template>
  <v-lazy-image
    src="https://cdn-images-1.medium.com/max/1600/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    src-placeholder="https://cdn-images-1.medium.com/max/80/1*xjGrvQSXvj72W4zD6IWzfg.jpeg"
    @intersect="..."
    @load="..."
  />
</template>

# Demo with CSS Animations

Look at this demo and see different CSS Animations you can apply. It's aim is that you can get inspired by playing with it.

# Follow up

Now you're ready to provide the best user experience using v-lazy-image! You can always go to its Gihub repo to see the full component API.

If you want to learn more about Progressive Image Loading, my friend @jmperezperez has written about the progressive loading technique on his blog with a deeper explanation.