Ryan Warner

Next gen image formats

January 08, 2020

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:

© Ryan Warner 2022
GithubDribbbleTwitter