How to webp with jpeg fallback?

🙋Get Help
#1

Hello everyone

I was wondering if someone knows a good solution for image optimization with headless wordpress ?

Like, how do you handle user uploading a jpeg image and have it not only auto converted to webp, but also managed in your react code ?

Thank you !

#2

I thought about using Webp in my projects too.
I haven’t done it yet but have it in the back of my head.

Basically, we need to make it look like this:

<picture>
  <source srcset="img/picture1.webp" type="image/webp">
  <source srcset="img/picture1.jpg" type="image/jpeg"> 
  <img src="img/picture1.jpg" alt="Alt Text!">
</picture>

Here’s what I have thought so far:

  1. Use a plugin such as ShortPixel to make webp images based on your images
  2. Create a component something like this (not tested)
const WebpImageWithFallback = ({src, fallbackUrl, alt, ...props}) => {

return (
<picture>
  <source srcset="{src}" type="image/webp">
  <source srcset="{fallbackUrl}" type="image/jpeg"> 
  <img src="{src}" alt="{alt}" {...props}/>
</picture>
);
}
  1. Then create a processor for any tag that has a jpg and replace the node.component with the new component and pass the node.props with the proper formatted src/fallbackUrl/alt etc.
1 Like
#3

thank you

had something similar in mind but struggled to find a plugin that preserves the image url and just changes .jpg to .webp in the image url, ShortPixel seems to do just that !