0.8.0 • Published 3 years ago
react-image-webp v0.8.0
React image webp
HTML Picture instead of this library
I highly recommend using HTML for trying load webp images. And using this library for very specific cases. Example for native HTML :
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>
Links:
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
- https://css-tricks.com/using-webp-images/#article-header-id-3
Description
React component for check browser support format WebP and insert if supported WebP image. More about WebP https://developers.google.com/speed/webp/
As of October 2021, global WebP Support from browsers is 95.31% – caniuse.com
Features
- Small component for React.js (3.55 KB)
- Small function (167 B)
Installation
NPM
npm install react-image-webp --save-dev
Yarn
yarn add react-image-webp
Guide
Import component in file
import Image from 'react-image-webp';
or you can import just small function (167 B)
import {isWebpSupported} from 'react-image-webp/dist/utils';
And start use:
<Image
src={require('./path/to/image')}
webp={require('./path/to/webp')}
/>
or
isWebpSupported()
? <img src="./path/to/img.webp" />
: <img src="./path/to/img.png" />
Props
0.8.0
3 years ago
0.7.0
4 years ago
0.6.0
5 years ago
0.5.2
5 years ago
0.5.1
5 years ago
0.4.3
5 years ago
0.4.2
5 years ago
0.4.1
5 years ago
0.4.0
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.2
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.10
7 years ago
0.1.9
7 years ago
0.1.8
7 years ago
0.1.7
7 years ago
0.1.6
7 years ago
0.1.5
7 years ago
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago