I want to show two different resolutions based on viewport size. Basically, a smaller resolution image in mobile, and more in wide screens (>= 64rem).

This is not [art direction](https://nextjs.org/docs/app/api-reference/components/image#art-direction) because the image is same (at least in "looks"), but I achieved it using that approach.

  const common = { alt: "" };
  const {
    props: { srcSet: desktop },
  } = getImageProps({
    ...common,
    width: 145,
    height: 40,
    src: LogoBig.src,
  });
  const defaultProps = getImageProps({
    ...common,
    width: 90,
    height: 25,
    src: LogoSmall.src,
  });

  return (
    <div className="block h-6 lg:h-10">
      <picture className="block h-full">
        <source media="(min-width: 64rem)" srcSet={desktop} type="image/png" />
        <img {...defaultProps.props} className="h-full w-full" />
      </picture>
    </div>
  );

This feels like an overkill because I just want the a smaller size image. Using the following sizes value doesn't seem to work:

<Image src={LogoBig} alt="" sizes="(min-width: 64rem) 145w, 90w" className="h-full w-auto" />

This generates a very large srcSet value, which seems unnecessary, although it does seem to fetch different images, but each image has the same size.

Using the former approach, I get the desired results, 7.5KB on mobile, and 11.5KB on large screens.
(I could use svg, but that's a different thing)

Edit: The dimensions of the images itself are different too, but that probably doesn't matter..?