Image component with performance configuration

Image.jsx

import React from "react";
import PropTypes from "prop-types";

export const Image = (props) => {
  const { src, alt } = props;
  return (
    <picture>
      <source
        type="image/webp"
        srcSet={`
            ${src}?width=100 100w,
            ${src}?width=200 200w,
            ${src}?width=400 400w,
            ${src}?width=800 800w
        `}
      />
      <img
        src={src}
        role="presentation"
        alt={alt}
        srcSet={`
            ${src}?width=100 100w,
            ${src}?width=200 200w,
            ${src}?width=400 400w,
            ${src}?width=800 800w
        `}
        loading="lazy"
        sizes="(max-width: 800px) 100vw, 50vw"
        decoding="async"
        fetchPriority="high"
      />
    </picture>
  );
};

Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
};