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