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:
- Use a plugin such as ShortPixel to make webp images based on your images
- 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>
);
}
- 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.