rm React image ⚡
The main objective is to achieve the best possible performance without penalizing SEO. Also, it use W3C img attributes.
Features
-
⚡️ Optimized for performance -
📈 SEO friendly -
😪 Lazy load support -
🌇 Loading and error placeholders -
🔁 Server side support (SSR) -
☝ No dependencies, just one possible polyfill: intersection-observer polyfill -
🗜️ 5KB gzipped (plus 1KB if you need intersection-observer)
Overview
React Slidy is a simple and minimal slider component. The main objective is to achieve the best performance and smoothness on React apps, specially on mobile
Installation
# Yarn
$ yarn add rm-react-image
# NPM
$ npm i --save rm-react-image
Usage
Common usage with lazy loading for
loading="lazy"
import React from 'react';
import { Image } from 'rm-react-image';
const deviceUserAgent = 'googlebot'
const MyImage = ({ alt, height, src, width }) => (
<Image
alt={alt}
src={src} // also support srcset and sizes attributes
width={width}
height={height}
loading="lazy"
userAgent={deviceUserAgent} />
);
export default MyImage;Loading "lazy" attribute will act differently depends on User-Agent.
-
If Image detects that User-Agent is a bot, the image will be rendered on SSR and will use native browser lazy loading
-
If the image detects that User-Agent is a user, the image will render when it enters to the viewport.
For that reason, it is important to pass userAgent prop on client and server-side.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| alt | String |
Indicate the alternate fallback content to be displayed if the image has not been loaded | |
| base64Placeholders | Object |
{loading: undefined, error: undefined} |
Define Base64 placeholder |
| className | String |
Element class name | |
| decoding | String |
Represents a hint given to the browser on how it should decode the image. | |
| height |
String or Number
|
Indicates the rendered height of the image in CSS pixels. | |
| loading | String |
Determine whether to load the image immediately (eager) or on an as-needed basis (lazy). |
|
| onError | Function |
Callback triggered if an error occurs while loading an external file. | |
| onLoad | Function |
Callback triggered if image load successfully. | |
| sizes | String |
This string specifies a list of comma-separated conditional sizes for the image; that is, for a given viewport size, a particular image size is to be used. Read the documentation on the sizes page for details on the format of this string. | |
| src | String |
Contains the full URL of the image including base URI. | |
| srcSet | String |
This specifies a list of candidate images, separated by commas (',', U+002C COMMA). Each candidate image is a URL followed by a space, followed by a specially-formatted string indicating the size of the image. The size may be specified either the width or a size multiple. Read the srcset page for specifics on the format of the size substring. |
|
| style | Object |
CSS style properties to inline them. | |
| userAgent | String |
Device user agent used for improve rendering strategy. | |
| width |
String or Number
|
Indicates the rendered width of the image in CSS pixels. |
How to
Use error placeholder
import React from 'react';
import { Image } from 'rm-react-image';
const deviceUserAgent = 'googlebot'
const imageProps = {
base64Placeholders: {
error: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
},
onError: () => console.log('Image can not be found')
}
const MyImage = ({ alt, height, src, width }) => (
<Image
alt={alt}
src={src} // also support srcset and sizes attributes
width={width}
height={height}
loading="lazy"
userAgent={deviceUserAgent}
{...imageProps} />
);
export default MyImage;Use loading placeholder
import React from 'react';
import { Image } from 'rm-react-image';
const deviceUserAgent = 'googlebot'
const imageProps = {
base64Placeholders: {
loading: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
},
onLoad: () => console.log('Image has been loaded'),
}
const MyImage = ({ alt, height, src, width }) => (
<Image
alt={alt}
src={src} // also support srcset and sizes attributes
width={width}
height={height}
loading="lazy"
userAgent={deviceUserAgent}
{...imageProps} />
);
export default MyImage;Not lazy load image for
loading="eager"
import React from 'react';
import { Image } from 'rm-react-image';
const deviceUserAgent = 'googlebot'
const MyImage = ({ alt, height, src, width }) => (
<Image
alt={alt}
src={src} // also support srcset and sizes attributes
width={width}
height={height}
loading="eager"
userAgent={deviceUserAgent} />
);
export default MyImage;Browser compatibility
Supported browsers are:
- Chrome
- Firefox
- Safari 6+
- Internet Explorer 11+
- Microsoft Edge 12+
If some of them doesn't work, please fill an issue.
Contribution
See Contributing Guide.
License
MIT