A simple react component for rendering webp images with a fallback for older browsers
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.
npm install react-webp-image
or
yarn add react-webp-image
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.
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.
