Vue Image Loader

V

Afficher des images, c'est bien. Mais lorsqu'elle sont lourdes, l'expérience utilisateur pourrait être détérioré lors du chargement. Pour palier à cela, pourquoi ne pas utiliser un composant VueJS ?

Le site Medium a mis en place il y a quelques temps maintenant, une nouvelle façon de charger les images. En plus d'utiliser des CDN, deux versions d'une image sont disponible. L'original, et une version avec une qualité extremement degradé qui ne pèsent ainsi que quelques kilo-octets.

Tout d'abord il charge la premiere image en la flouttant, puis lorsque l'original a finit de charger, on l'affiche.

C'est ce procédé que je vous propose aujourd'hui avec ce composant Vue.

alt tag

Installation

npm install @kevindesousa/vue-image-loader

Utilisation

import Vue from 'vue'
import VueImageLoader from '@kevindesousa/vue-image-loader'

Vue.use(VueImageLoader)

Progressive loader image

Au lieu d'utiliser le balise img pour charger des images

<img src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304" />

utiliser la balise image-loader installer globalement et disponible après l'installation du plugin

<image-loader
  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
  width="864px"
  height="476px" />

Placeholders

Pour être en mesure de montrer immédiatement un aperçu à l'utilisateur, il est possible de transmettre une image de substitution, qui pourrait également représenter 1% de la taille de l'image principale: elle sera floue pour vous permettre de réaliser des optimisations.

<image-loader
  src="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304"
  placeholder="https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?w=100"
  width="864px"
  height="476px"
/>

Liens

Github NPM Package Editer vue-image-loader