Introducing react-cool-img: An easy way to optimize images
Photo by Nitish Meena
on Unsplash
imgtag replacement for your React.js project.
Features
- 🖼 Placeholders for satisfying various image loading states (e.g. loading image > actual image > error image).
- 🛋 Smart lazy loading with performant and efficient way, using IntersectionObserver.
- 🤖 Built-in auto-retry mechanism. User won’t miss out your important information.
- 🚫 Abort any current image downloads on component unmount potentially saving bandwidth and browser resources.
- 🔍 Support server-side rendering / Javascript is disabled / SEO.
- 📜 Support TypeScript type definition.
- 🦠 Tiny size (~ 2.4kB gzipped). No external dependencies, aside for the
reactand
react-dom.
- 🔧 Easy to use.
Usage Example
import Img from 'react-cool-img';
// Suggest to use low quality or vector images
import loadingImage from './images/loading.gif';
import errorImage from './images/error.svg';
const App = () => (
<Img
placeholder={loadingImage}
src="https://the-image-url"
error={errorImage}
alt="React Cool Img"
/>
);imgtag.
import Img from 'react-cool-img';
const App = () => (
<Img
style={{ backgroundColor: 'grey', width: '480', height: '320' }}
src="https://the-image-url"
alt="React Cool Img"
/>
);The Smart Way to Load Images
debounceand
cacheprops.
debounceprop, an image can wait to be downloaded while it’s in the viewport for a set time. In cases where you have a long list of images that the user might scroll through inadvertently. At this time loading images can cause unnecessary waste of bandwidth and processing time.
import Img from 'react-cool-img';
import defaultImg from './images/default.svg';
const App = () => (
<Img
placeholder={defaultImg}
src="https://the-image-url"
debounce={1000} // Default is 300 (ms)
alt="React Cool Img"
/>
);cacheprop, images you already have cached will abort lazy loading until user visit your app next time. Lazy loading is set up for any remaining images which were not cached. This is helpful for UX, because there’s not much extra work to load cached images immediately and is an easy win for making the UI looks more intuitive.
import Img from 'react-cool-img';
import defaultImg from './images/default.svg';
const App = () => (
<Img
placeholder={defaultImg}
src="https://the-image-url"
cache // Default is true, just for demo
alt="React Cool Img"
/>
);JavaScript Availability and SEO
<noscript>tag ensure the image is indexed by search engine bots even if they cannot fully understand our JavaScript code. Take a look at how magic happens.
const Img = () => {
// ...
return (
<>
<img
class="image"
src="https://the-placeholder-image"
alt="There's no magic"
/>
<noscript>
<img
class="image"
src="https://the-actual-image"
alt="The magic begins in here..."
/>
</noscript>
</>
);
};$ yarn add react-cool-img
# or
$ npm install --save react-cool-img
