Next gen image formats

Improve your app's performance by reducing the file size of your images using WebP.

This snippet demonstrates implementing WebP images that fallsback to png/jpg in the case the user's browser does not support it.

<picture>
  <source srcSet={globeWebp} type="image/webp" />
  <source srcSet={globe} type="image/png" />
  <img src={globe} alt="An illustration of a planet-like sphere" />
</picture>

Browser support

Can I Use: WebP

Can I Use: JPEG 2000

Tools to create or convert WebP Images

• Node Module
• Sketch
• PhotoShop Plugin
• In browser: webp-converter or online-convert

Ways to improve this implementation

• Create a reusable React component that takes the image paths and alt text as props.
• Support JPEG 2000

Sources:

• https://davidwalsh.name/webp-images-performance
• https://css-tricks.com/using-webp-images/
• https://developer.mozilla.org/en-US/docs/Glossary/webp