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

prop	Description	Type	Default	Notes
src	path to the image	String	""	If it ends in .webp opti-image will automatically look for a .jpg in the same filepath for browsers that don't support .webp
fallback	defines what image should be used in browsers where webp isn't supported	String	"jpg"	extension only (no dot) = image in same location just different extension or provide a full path
lazy	whether or not the image should be lazy loaded	Boolean	true
responsive	whether or not the image should scale and always fit within parent container	Boolean	true	Aspect ratio determined by width/height properties will still be maintained while image is loading
width	width of the image	Integer	null	width and height must be provided to reserve space for the image
height	height of the image	Integer	null	when set to responsive, width and height work more to determine aspect ratio than to be a hard and fast width and height
webp	force webp image even if src does not have webp extension	Boolean	false	helpful when used with webpack loaders
disable-placeholder	don't do the placeholders	Boolean	false	let's the browser show the classic broken image icon instead

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 images
• 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]