opti-image

Opti-Image

A Vue.js component for handling performant images without the headache.

• Webp's with fallbacks for unsupported browsers (even in srcset)
• Lazy loading out of the box (uses Intersection Observer)
• Set standard srcset once in plugin options and it automatically applies to all opti-image components
• Space reserved according to aspect ratio to prevent page jumping upon image load
• Renders just a plain old img tag, no wrappers, for a drop in replacement for your current img's
• Built in support for placeholder.com for handy placeholder images during development
• Works with Nuxt.js (SSR)

Installation

npm i opti-image --save

Global Use

//Main.js or similar
import OptiImagePlugin from 'opti-image'
Vue.use(OptiImagePlugin, {
    sizes: [1024, 768, 400]
})

Use In One Component

<script>
import { OptiImage } from 'opti-image'
export default {
    components: {OptiImage}
}
</script> 

Demo

See opti-image in action at danielkelly.io.

• Open site in Chrome to see webp's and in Safari to see automatic jpg fallbacks.
• Lazy load and custom animations on image load used.

Getting Started

<template>
    // NOTE: All of the below automatically have srcset if sizes set in plugin options
    
    <!-- Basic Usage with Lazy Loading and Webp Fallbacks -->
    <opti-image src="my-image.webp" />
    
    <!-- Fallback to png in unsupported browser -->
    <opti-image src="my-image.webp" fallback="png" />
     
    <!-- Fallback to completely different image in unsupported browser -->
    <opti-image src="my-image.webp" fallback="completely/different/image.jpg" />
    
    <!-- No lazy load -->
    <opti-image src="my-image.webp" :lazy="false" />
    
    <!-- Sized Placeholder -->
    <opti-image width="500" height="350" />
    
    <!-- Default 800 x 600 Placeholder -->
    <opti-image/>  
    
    <!-- Not Restrained to Container -->
    <opti-image src="my-image.webp"  :responsive="false" />

</template>

Props

Animating Image in On Load

.opti-image {
  opacity: 1;
  transition: 0.5s ease opacity;
}
.opti-image-before-load {
  opacity: 0;
}

Helpful Classes

• opti-image - static class on all
• opti-image-before-load - class exists before image is loaded
• opti-image-loaded - class exists as soon as image loads
• opti-image-load-error - class exists when browser has issue loading image
• opti-image-responsive - class exists when prop responsive is true

Important Note that while opti-image takes away the pain of serving webp's it doesn't do anything to generate them! The webp's and their fallbacks must already exist. Bring your own webpack loaders to the table to accomplish this.

All feedback and pull requests welcome!

MIT License [https://opensource.org/licenses/MIT]