Astro Responsive Image

---
import type { ImageOutputFormat } from "astro";
import { getImage, type ImgAttributes } from "astro:assets";

type Unit = "px" | "em" | "rem";
type Size = `${number}${Unit}`;
type MinMediaQuery = `(min-width: ${Size})`;
type MaxMediaQuery = `(max-width: ${Size})`;
type OtherMediaQuery =
	| "(orientation: portrait)"
	| "(orientation: landscape)"
	| "(prefers-color-scheme: dark)"
	| "(prefers-color-scheme: light)";
type MediaQueries = MinMediaQuery | MaxMediaQuery | OtherMediaQuery;

type Props = Omit<ImgAttributes, "sizes"> & {
	src: ImageMetadata;
	format?: ImageOutputFormat;
	srcSet: {
		media?: `${MediaQueries}` | `(${MinMediaQuery} and ${MaxMediaQuery})` | `(${MaxMediaQuery} or ${MinMediaQuery})`;
		size: number;
	}[];
};

const { src, format, alt, id, srcSet } = Astro.props;
const className = Astro.props.class;

if (!srcSet.length) throw new Error("No srcSet provided");

const imgSrc = await getImage({ src, width: Math.min(...srcSet.map((ss) => ss.size)), format });
const srcset = await Promise.all(
	srcSet.map(async (ss) => {
		const image = await getImage({ src, width: ss.size, format });
		return `${image.src} ${ss.size}w`;
	})
);
const sizes = srcSet.map((ss) => (ss.media ? `${ss.media} ${ss.size}px` : `${ss.size}px`));
---

<img srcset={srcset.join(", ")} sizes={sizes.join(", ")} {id} {alt} src={imgSrc.src} class={className} loading="lazy" />

---
import { cn } from "$/util";
import type { ImageOutputFormat } from "astro";
import { getImage, type ImgAttributes } from "astro:assets";

type Unit = "px" | "em" | "rem";
type Size = `${number}${Unit}`;
type MinMediaQuery = `(min-width: ${Size})`;
type MaxMediaQuery = `(max-width: ${Size})`;
type MinMaxMediaQuery =
	| MinMediaQuery
	| MaxMediaQuery
	| `${MinMediaQuery} and ${MaxMediaQuery}`
	| `(${MaxMediaQuery} or ${MinMediaQuery})`;
type OtherMediaQuery =
	| "(orientation: portrait)"
	| "(orientation: landscape)"
	| "(prefers-color-scheme: dark)"
	| "(prefers-color-scheme: light)";
type OMMMediaQuery = `${OtherMediaQuery} and ${MinMaxMediaQuery}`;

type Props = ImgAttributes & {
	src: ImageMetadata;
	pictureClass?: string | string[];
	include2x?: boolean;
	include3x?: boolean;
	srcSet: {
		src?: ImageMetadata;
		media: MinMaxMediaQuery | OtherMediaQuery | OMMMediaQuery;
		size: number;
		format?: ImageOutputFormat;
	}[];
};

const { src, srcSet, pictureClass, include2x, include3x, ...rest } = Astro.props;
const className = Astro.props.class;
const loading = Astro.props.loading || "lazy";

const srcset = (
	await Promise.all(
		srcSet.map(async ({ media, size, format, ...img }) => {
			const url = src || img.src;
			const images: string[] = [];

			const image = await getImage({ src: url, width: size, format });
			images.push(`${image.src}`);

			if (include2x) {
				const image2x = await getImage({ src: url, width: size * 2, format });
				images.push(`${image2x.src} 2x`);
			}

			if (include3x) {
				const image3x = await getImage({ src: url, width: size * 3, format });
				images.push(`${image3x.src} 3x`);
			}

			return {
				src: images.join(", "),
				media,
				type: format && `image/${format}`,
				size
			};
		})
	)
).sort((a, b) => a.size - b.size);

const maxSize = srcset.reduce((acc, curr) => (curr.size > acc ? curr.size : acc), 0);
const imgSrc = srcset.find((ss) => ss.size === maxSize);
if (!imgSrc) throw new Error("No image source found");
---

<picture class={cn("h-full w-full", pictureClass)}>
	{srcset.map((ss) => <source srcset={ss.src} media={ss.media} type={ss.type} />)}
	<img src={imgSrc.src.split(", ")[0]} loading={loading} class={className} {...rest} />
</picture>