Custom Image Component

Image.tsx

const ImgWithFallback = ({
  src: string,
  fallback: string,
  type = 'image/webp',
  ...props
}) => {
  return (
    <picture>
      <source srcSet={src} type={type} />
      <img src={fallback} {...props} />
    </picture>
  );
};

// Usage
/* 
<ImgWithFallback
  src="/images/me.webp"
  fallback="/images/me.png"
  alt="A photo of me"
/>
*/