Progressive Image Loading in Vue.js

If you’ve spent any time on Medium (and I know you have, you’re a developer,) you’ve probably at least noticed their image loading technique. First a very low-resolution image is loaded, and is then displayed to the client highly blurred as a placeholder. Once the full-resolution image loads, the placeholder fades out to reveal it. The resulting transition is very smooth and easy on the eyes.

(If you’re interested in learning more about this technique and alternatives, take a look at this post by José M. Pérez.)

Turns out, of course, that there’s a plugin for Vue (by @ccforward) that implements this effect.

Installation

Install progressive-image in your Vue.js project with Yarn or NPM:

# Yarn
$ yarn add progressive-image
# NPM
$ npm install progressive-image --save

You’ll need to import the CSS in your page first. Use whatever method you’d like. (The most basic method being a direct import.)

<link href="./node_modules/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

Now, in your app’s main file, enable the ProgressiveImage plugin.

import Vue from 'vue';
import ProgressiveImage from 'progressive-image/dist/vue'
import App from 'App.vue';

Vue.use(ProgressiveImage, {
  removePreview: true
});

new Vue({
  el: '#app',
  render: h => h(App)
});

Usage

From there, it’s a cinch to add a preview to your component. Assuming you have a full-size and low-resolution image already prepared,

<template>
  <div class="my-component">
    <!-- Render a progressive image -->
    <div class="progressive">
      <img class="preview" v-progressive="'./example.png'" src="./example-preview.png"/>
    </div>

  </div>
</template>

Bindings are fully supported, so it’s also a cinch to render images from an array or data set.

Bonus: srcset support.

As an added bonus, progressive-image supports srcset usage for responsive images. (If you’re not familiar with what that is, here’s a great article on the subject.)

You can use it directly through a data attribute or a binding.

<template>
  <div class="my-component">
    <!-- Render a progressive image -->
    <div class="progressive">
      <img class="preview" v-progressive="'./example.png'" src="./example-preview.png" data-srcset="./example.jpg 1x, ./example@2x.jpg 2x"/>
    </div>

  </div>
</template>

Have fun with super simple, great looking responsive images!