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 importImgfrom"react-webp-image";importimgPathfrom"assets/photo.png";importwebpPathfrom"assets/photo.webp";<Imgsrc={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.