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

property	type	description
src	string	Path to fallback image if WebP doesn't browser support
webp	string	Path to WebP image
alt	string	Alternate text
title	string	Title text
style	object	Style for image
className	string	Class name for image