React webp image

A simple react component for rendering webp images with an image fallback for older browsers. It uses the <picture> tag to support older browsers without the need for feature detection or a polyfill.

Installation

npm install react-webp-image

or

yarn add react-webp-image

Usage

import Img from "react-webp-image";
import imgPath from "assets/photo.png";
import webpPath from "assets/photo.webp";

<Img src={imgPath} webp={webpPath} alt="I'm a webp image" />;

Any additional props will be passed down to the img tag.

Why use webp?

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Learn more about webp