Alex Jover has introduced a V-lazy-image Vue Component that Lazy load images using Intersection Observer, apply progressive rendering and css animations.
It is a Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

Installation

npm install v-lazy-image

Warning: You’ll need to install the w3c Intersection Observer polyfill in case you’re targeting a browser that doesn’t support it.

Usage

For Vue 3, import it and use it like any other component:

<script setup>
import VLazyImage from "v-lazy-image";
</script>

For Vue 2, import it from v-lazy-image/v2:

import VLazyImage from "v-lazy-image/v2";

export default {
  components: {
    VLazyImage
  }
};

You must pass an src property with the link of the image:

<template>
  <v-lazy-image src="http://lorempixel.com/400/200/" />
</template>

That easy, the image will be loaded as soon as it enters the viewport. See it running in this demo and you’ll learn how to use Chrome DevTools to check how it’s loaded.

Achieving Max Performance

Just by using v-lazy-image, you’ll have a performance gain, since the image will be loaded when it’s going to be seen.

But you can go to the next level and squeeze your web’s performance if you use the next techniques.

Responsive Images

v-lazy-image allows you to use Web Standard’s: the srcset attribute on images and the tag.

“Use Responsive Images with v-lazy-image” shows you how simple it is and see it in action in a demo.

Progressive Image Loading

A technique used by platforms like Spotify, Netflix, or Medium to improve Perceived Performance, thus the User Experience.

In “Achieve Max Performance loading your images with v-lazy-image” you’ll see what’s progressive image loading about, how to apply it in v-lazy-image using the src-placeholder attribute, and a demo to see how it plays with a CSS animation.

API

Aside from the following API, you can pass any img attribute, such as alt, and they’ll be added to the rendered img tag.

Fields marked as (*) are required.

If you want to utilize this package in your project then you can visit its documentation on Github.