ITAP

ITAP: internet nomenclature, usually taken to mean 'I Took A Picture'

Description

A React component for progressive background image loading.

Features

• Component driven
• Easy asynchronous lazyloading for background images.
• Start image with a placeholder and blur in new image once loaded.
• Matches image with screen width.
• Replace image with placeholder on browser resize while new image is downloaded.
• Handle multiple screen widths, easy to specify as an object.
• Clientside webp check, serve webp files where the browser supports it.
• Specify multiple file formats.

Getting Started

Installing ITAP

Start by installing ITAP with yarn

yarn add itap

or npm

npm install itap

Usage

import the module

import ITAP from 'itap';

ITAP takes two objects as props, both objects should have a 0 key which acts as the default placeholder or image.

The value of the key represents the browser width at which the image should take effect.

Placeholder Object

import placeholderSmall from './img/placeholder-small.png';
import placeholderMedium from './img/placeholder-medium.png';
import placeholderLarge from './img/placeholder-large.png';

const placeholders = {
	0: placeholderSmall,
	768: placeholderMedium,
	992: placeholderLarge
};

Images Object

const imagesObj = {
	0: {
		'jpg': 'url-for-image.jpg',
		'webp': 'url-for-image.webp'
	},
	768: {
		'jpg': 'url-for-image.jpg',
		'webp': 'url-for-image.webp'
	},
	992: {
		'jpg': 'url-for-image.jpg',
		'webp': 'url-for-image.webp'
	},
	1200: {
		'jpg': 'url-for-image.jpg',
		'webp': 'url-for-image.webp'
	}
};

Pass both objects to the component

<ITAP placeholders={placeholders} imagesObj={imagesObj} />

The component size and height can then be controlled using CSS or SASS.

The standard classes are;

.itap-image-container {}

.itap-image-preload {}

.itap-image-loaded {}

.itap-fade-in {}

Component also takes a prop to specify a unique class e.g.

<ITAP placeholderObj={placeholderObj} imagesObj={imagesObj} customClassName='ITAP-hero'/>

File types

Webp file format will be used where the browser supports it and the resource is available.

Webp support is not checked when loading placeholder images, use jpeg or png heavily compressed at a smaller resolution to the original but at the same ratio.