react-webp-image

1.0.8 • Public • Published

React webp image

npm package Travis Coveralls

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

Package Sidebar

Install

npm i react-webp-image

Weekly Downloads

559

Version

1.0.8

License

MIT

Unpacked Size

21.6 kB

Total Files

8

Last publish

Collaborators

  • tylerwolff