PIMG

Progressive Image Component with Cloudinary.

Features

• ~20B gzipped.

• Lazy Loading of Images.

• Works with P(R)eact.

Contents

• Usage
• Examples
• Goals

Usage

It's quite simple to use.

npm install pimg

import Image from 'pimg'; // react
import Image from 'pimg/dist/preact'; //preact

render(<Image src='cloudinary_image_url'>, document.getElementById('root'))

*Make sure you add this to your stylesheet:

.pimg { width: 500px; } // You should change this to the width of your choice

.pimg__loading { filter: blur(5vw); transform: scale(1.05); } // This makes the thumbnail blurry

Examples

• Simple React Example
• Simple Preact Example

Goals

• Scroll to viewing of images.

• Support non-cloudinary images.

• Working with other VDOM libraries.

Contributions

Feel free to send a PR.

License

MIT