Adding a <Picture /> component

packages/integrations/image/components/Image.astro

@@ -4,7 +4,7 @@ import loader from 'virtual:image-loader';
 import { getImage } from '../src/index.js';
 import type { ImageAttributes, ImageMetadata, TransformOptions, OutputFormat } from '../src/types.js';
 
-export interface LocalImageProps extends Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src'> {
+export interface LocalImageProps extends Omit<TransformOptions, 'src'> {
 	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
 }
 
@@ -23,3 +23,9 @@ const attrs = await getImage(loader, props);
 ---
 
 <img {...attrs} />
+
+<style>
+	img {
+		content-visibility: auto;
+	}
+</style>

packages/integrations/image/components/Picture.astro

@@ -0,0 +1,46 @@
+---
+import Image from './Image.astro';
+// @ts-ignore
+import loader from 'virtual:image-loader';
+import { lookup } from 'mrmime';
+import { getImage } from '../src/index.js';
+import type { ImageMetadata, OutputFormat } from '../src/types.js';
+
+export interface Props extends Partial<HTMLPictureElement> {
+	src: ImageMetadata;
+	sizes: HTMLImageElement['sizes'];
+	widths: number[];
+	formats?: OutputFormat[];
+}
+
+const { src, sizes, widths, formats = ['avif', 'webp', 'jpeg'] } = Astro.props as Props;
+
+if (widths.length <= 0) {
+	throw new Error('At least one width must be provided for the <Picture>');
+}
+
+const aspectRatio = src.width / src.height;
+
+async function getSource(format: OutputFormat) {
+	const imgs = await Promise.all(widths.map(async (width) => {
+		const img = await getImage(loader, { src: src.src, format, width, height: Math.round(width / aspectRatio) });
+		return `${img.src} ${width}w`;
+	}))
+
+	return {
+		type: lookup(format) || format,
+		srcset: imgs.join(',')
+	};
+}
+
+const sources = await Promise.all(formats.map(format => getSource(format)));
+
+const width = widths.sort().shift()!;
+const height = Math.round(width / aspectRatio);
+---
+
+<picture>
+	{sources.map(attrs => (
+	<source {...attrs} {sizes}>))}
+	<Image {sizes} {src} {width} {height} />
+</picture>

packages/integrations/image/components/index.js

@@ -1 +1,2 @@
 export { default as Image } from './Image.astro';
+export { default as Picture } from './Picture.astro';