react-image-webp

0.8.0 • Public • Published

React image webp

npm

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:

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

Readme

Keywords

Package Sidebar

Install

npm i react-image-webp

Weekly Downloads

1,172

Version

0.8.0

License

none

Unpacked Size

3.73 MB

Total Files

25

Last publish

Collaborators

  • donrai