VUE-PROGRESSIVE-IMAGES

NPM package for Vue.JS:

Super lightweight script that provides a way to offer progressive image loading in Vue Apps.

Important:

You might not need this plugin if you are targeting newer browsers. The IMG tag have a property called SRCSET, which is much more powerful.

http://caniuse.com/#feat=srcset

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

But if you need this plugin, here is how you get it:

npm install vue-progressive-images

or

yarn add vue-progressive-images

How does it work?

The script will check the browser's screen resolution and then update the SRC property of the IMG tag.

Therefore, the first step is for you to create iamges as follows:

• [email protected] >>> A very small iamges. I use 2 colors, but you might want to use 16.

• [email protected] >>> Normal image.

• [email protected] >>> For displays with aspect ratio 2.

• [email protected] >>> For displays with aspect ratio 3.

You can use any file extension: PNG, JPG, GIF, etc.

For better results, you can combine it with a local or server batch image processing to create those image automatically.

For a manual process you can use Photoshop and the plugin "Retinize It".

Behind the scenes

The first time the script runs it will offer the lower resolution image @0x. That image should be small, maybe 3Kb or less. Then, once page is loaded and all the resources are rendered on browser, then the script will get the screen aspect ration and update on IMG tags, replacing the @0x with 1x, 2x or 3x. If nothing else, this script will help speed up your first page load.

Properties

src

(Mandatory)

• Type: Text.
• Purpose: Reference the image URL.

alt

(Optional - but highly recommended)

• Type: Text.
• Purpose: Text that will be added to image alt property.
• Default: Empty.
• Example: alt="My image alt text"

max-ratio

(Optional)

• Type: Number.
• Default: Unlimited.
• Purpose: Limit the loading of image to ratio number.
• Example: max-ratio="1"
• This will make sure that even in screens with higher ratio, the plugin will only go up to 1.

blur

(Optional)

• Type: Number
• Purpose: Define the level of blur-ness.
• Default: No blur.
• Example: blur="5"
• This will cause the CSS for the image to have a blur level 5px.

animate

(Optional)

• Type: Number
• Purpose: Define the speed (in seconds) of animation for removing blur filter.
• Default: No animate.
• Example: animate="2.5"
• This will cause the animation to remove blur to take 2.5 seconds.

Compatibility

This script is compatible with IE 9+. However, on IE10 and older it will only fallback to the basic image @1x.

How to use?

<template>
  <div>
    <Image class="photo" src="static/[email protected]" alt="My alt text"></Image>
  </div>
</template>

<script>
import Image from 'vue-progressive-images';

export default {
  name: 'my-header',
  components: { Image }
};
</script>

<style>
.photo img {
  width: 200px;
}
</style>

Or... Even better you can define it as a recursive component on your "main.js":

import Image from 'vue-progressive-images';
import Vue from 'vue';
...


Vue.component('Image', Image);

new Vue({
  ...

How to use with NUXT ?

In order to use this script with NUXT, please create a new component within your NUXT project, lets say "components/Image.vue", and then copy and past the content from the file "vue-progressive-images/src/Image-Nuxt.vue" into it. Once that is done, you can register the component as a global component. To do that, edit your main layout (vue).

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue'
import Image from '@/components/Image'

Vue.component('fn-image', Image)

export default { }
</script>

Please notice that the code standard for Nuxt Apps is very different from some of the standards offered by Vue-CLI.

Collaboration

Collaboration is welcomed. Please send your pull request.

Current Authors

• Fabio Nolasco