Next gen image formats

Using next gen image formats like WebP is a great way to improve your app's performance by drastically reducing the file size of your images.

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

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

Browser support

Can I Use: WebP

Can I Use: JPEG 2000

Tools to create or convert WebP Images

Ways to improve this implementation

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