feat: add responsive image component

packages/astro/components/Image.astro

@@ -1,5 +1,5 @@
 ---
-import { type LocalImageProps, type RemoteImageProps, getImage } from 'astro:assets';
+import { type LocalImageProps, type RemoteImageProps, getImage, imageConfig } from 'astro:assets';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
 import type { HTMLAttributes } from '../types';
 
@@ -33,6 +33,58 @@ if (image.srcSet.values.length > 0) {
 if (import.meta.env.DEV) {
 	additionalAttributes['data-image-component'] = 'true';
 }
+
+const { experimentalResponsiveImages } = imageConfig;
+
+const layoutClassMap = {
+	fixed: 'aim-fi',
+	responsive: 'aim-re',
+};
+
+const cssFitValues = ['fill', 'contain', 'cover', 'scale-down'];
+const objectFit = props.fit ?? imageConfig.experimentalObjectFit ?? 'cover';
+const objectPosition = props.position ?? imageConfig.experimentalObjectPosition ?? 'center';
+
+// The style prop can't be spread when using define:vars, so we need to extract it here
+// @see https://github.com/withastro/compiler/issues/1050
+const { style = '', class: className, ...attrs } = { ...additionalAttributes, ...image.attributes };
 ---
 
-<img src={image.src} {...additionalAttributes} {...image.attributes} />
+<img
+	src={image.src}
+	{...attrs}
+	{style}
+	class:list={[
+		experimentalResponsiveImages && layoutClassMap[props.layout ?? imageConfig.experimentalLayout],
+		experimentalResponsiveImages && 'aim',
+		className,
+	]}
+/>
+
+<style
+	define:vars={experimentalResponsiveImages && {
+		w: image.attributes.width ?? props.width ?? image.options.width,
+		h: image.attributes.height ?? props.height ?? image.options.height,
+		fit: cssFitValues.includes(objectFit) && objectFit,
+		pos: objectPosition,
+	}}
+>
+	/* Shared by all Astro images */
+	.aim {
+		width: 100%;
+		height: auto;
+		object-fit: var(--fit);
+		object-position: var(--pos);
+		aspect-ratio: var(--w) / var(--h);
+	}
+	/* Styles for responsive layout */
+	.aim-re {
+		max-width: calc(var(--w) * 1px);
+		max-height: calc(var(--h) * 1px);
+	}
+	/* Styles for fixed layout */
+	.aim-fi {
+		width: calc(var(--w) * 1px);
+		height: calc(var(--h) * 1px);
+	}
+</style>

packages/astro/src/assets/internal.ts

@@ -12,6 +12,7 @@ import {
 } from './types.js';
 import { isESMImportedImage, isRemoteImage, resolveSrc } from './utils/imageKind.js';
 import { inferRemoteSize } from './utils/remoteProbe.js';
+import { DEFAULT_RESOLUTIONS, getSizes, getWidths, LIMITED_RESOLUTIONS } from './layout.js';
 
 export async function getConfiguredImageService(): Promise<ImageService> {
 	if (!globalThis?.astroAsset?.imageService) {
@@ -32,9 +33,13 @@ export async function getConfiguredImageService(): Promise<ImageService> {
 	return globalThis.astroAsset.imageService;
 }
 
+type ImageConfig = AstroConfig['image'] & {
+	experimentalResponsiveImages: boolean;
+};
+
 export async function getImage(
 	options: UnresolvedImageTransform,
-	imageConfig: AstroConfig['image'],
+	imageConfig: ImageConfig,
 ): Promise<GetImageResult> {
 	if (!options || typeof options !== 'object') {
 		throw new AstroError({
@@ -65,6 +70,10 @@ export async function getImage(
 		src: await resolveSrc(options.src),
 	};
 
+	let originalWidth: number | undefined;
+	let originalHeight: number | undefined;
+	let originalFormat: string | undefined;
+
 	// Infer size for remote images if inferSize is true
 	if (
 		options.inferSize &&
@@ -74,6 +83,9 @@ export async function getImage(
 		const result = await inferRemoteSize(resolvedOptions.src); // Directly probe the image URL
 		resolvedOptions.width ??= result.width;
 		resolvedOptions.height ??= result.height;
+		originalWidth = result.width;
+		originalHeight = result.height;
+		originalFormat = result.format;
 		delete resolvedOptions.inferSize; // Delete so it doesn't end up in the attributes
 	}
 
@@ -88,8 +100,49 @@ export async function getImage(
 			(resolvedOptions.src.clone ?? resolvedOptions.src)
 		: resolvedOptions.src;
 
+	if (isESMImportedImage(clonedSrc)) {
+		originalWidth = clonedSrc.width;
+		originalHeight = clonedSrc.height;
+		originalFormat = clonedSrc.format;
+	}
+
+	if (originalWidth && originalHeight) {
+		// Calculate any missing dimensions from the aspect ratio, if available
+		const aspectRatio = originalWidth / originalHeight;
+		if (resolvedOptions.height && !resolvedOptions.width) {
+			resolvedOptions.width = Math.round(resolvedOptions.height * aspectRatio);
+		} else if (resolvedOptions.width && !resolvedOptions.height) {
+			resolvedOptions.height = Math.round(resolvedOptions.width / aspectRatio);
+		} else if (!resolvedOptions.width && !resolvedOptions.height) {
+			resolvedOptions.width = originalWidth;
+			resolvedOptions.height = originalHeight;
+		}
+	}
 	resolvedOptions.src = clonedSrc;
 
+	const layout = options.layout ?? imageConfig.experimentalLayout;
+
+	if (imageConfig.experimentalResponsiveImages && layout) {
+		resolvedOptions.widths ||= getWidths({
+			width: resolvedOptions.width,
+			layout,
+			originalWidth,
+			breakpoints: isLocalService(service) ? LIMITED_RESOLUTIONS : DEFAULT_RESOLUTIONS,
+		});
+		resolvedOptions.sizes ||= getSizes({ width: resolvedOptions.width, layout });
+
+		if (resolvedOptions.priority) {
+			resolvedOptions.loading ??= 'eager';
+			resolvedOptions.decoding ??= 'sync';
+			resolvedOptions.fetchpriority ??= 'high';
+		} else {
+			resolvedOptions.loading ??= 'lazy';
+			resolvedOptions.decoding ??= 'async';
+			resolvedOptions.fetchpriority ??= 'auto';
+		}
+		delete resolvedOptions.priority;
+	}
+
 	const validatedOptions = service.validateOptions
 		? await service.validateOptions(resolvedOptions, imageConfig)
 		: resolvedOptions;
@@ -100,13 +153,23 @@ export async function getImage(
 		: [];
 
 	let imageURL = await service.getURL(validatedOptions, imageConfig);
+
+	const matchesOriginal = (transform: ImageTransform) =>
+		transform.width === originalWidth &&
+		transform.height === originalHeight &&
+		transform.format === originalFormat;
+
 	let srcSets: SrcSetValue[] = await Promise.all(
-		srcSetTransforms.map(async (srcSet) => ({
-			transform: srcSet.transform,
-			url: await service.getURL(srcSet.transform, imageConfig),
-			descriptor: srcSet.descriptor,
-			attributes: srcSet.attributes,
-		})),
+		srcSetTransforms.map(async (srcSet) => {
+			return {
+				transform: srcSet.transform,
+				url: matchesOriginal(srcSet.transform)
+					? imageURL
+					: await service.getURL(srcSet.transform, imageConfig),
+				descriptor: srcSet.descriptor,
+				attributes: srcSet.attributes,
+			};
+		}),
 	);
 
 	if (
@@ -120,12 +183,16 @@ export async function getImage(
 			propsToHash,
 			originalFilePath,
 		);
-		srcSets = srcSetTransforms.map((srcSet) => ({
-			transform: srcSet.transform,
-			url: globalThis.astroAsset.addStaticImage!(srcSet.transform, propsToHash, originalFilePath),
-			descriptor: srcSet.descriptor,
-			attributes: srcSet.attributes,
-		}));
+		srcSets = srcSetTransforms.map((srcSet) => {
+			return {
+				transform: srcSet.transform,
+				url: matchesOriginal(srcSet.transform)
+					? imageURL
+					: globalThis.astroAsset.addStaticImage!(srcSet.transform, propsToHash, originalFilePath),
+				descriptor: srcSet.descriptor,
+				attributes: srcSet.attributes,
+			};
+		});
 	}
 
 	return {

packages/astro/src/assets/layout.ts

@@ -0,0 +1,108 @@
+import type { ImageLayout } from '../types/public/index.js';
+
+// Common screen widths. These will be filtered according to the image size and layout
+export const DEFAULT_RESOLUTIONS = [
+	640, // older and lower-end phones
+	750, // iPhone 6-8
+	828, // iPhone XR/11
+	960, // older horizontal phones
+	1080, // iPhone 6-8 Plus
+	1280, // 720p
+	1668, // Various iPads
+	1920, // 1080p
+	2048, // QXGA
+	2560, // WQXGA
+	3200, // QHD+
+	3840, // 4K
+	4480, // 4.5K
+	5120, // 5K
+	6016, // 6K
+];
+
+// A more limited set of screen widths, for statically generated images
+export const LIMITED_RESOLUTIONS = [
+	640, // older and lower-end phones
+	750, // iPhone 6-8
+	828, // iPhone XR/11
+	1080, // iPhone 6-8 Plus
+	1280, // 720p
+	1668, // Various iPads
+	2048, // QXGA
+	2560, // WQXGA
+];
+
+/**
+ * Gets the breakpoints for an image, based on the layout and width
+ */
+export const getWidths = ({
+	width,
+	layout,
+	breakpoints = DEFAULT_RESOLUTIONS,
+	originalWidth,
+}: {
+	width?: number;
+	layout: ImageLayout;
+	breakpoints?: Array<number>;
+	originalWidth?: number;
+}): Array<number> => {
+	const smallerThanOriginal = (w: number) => !originalWidth || w <= originalWidth;
+	if (layout === 'full-width') {
+		return breakpoints.filter(smallerThanOriginal);
+	}
+	if (!width) {
+		return [];
+	}
+	const doubleWidth = width * 2;
+	const maxSize = originalWidth ? Math.min(doubleWidth, originalWidth) : doubleWidth;
+	if (layout === 'fixed') {
+		// If the image is larger than the original, only include the original width
+		// Otherwise, include the image width and the double-resolution width, unless the double-resolution width is larger than the original
+		return originalWidth && width > originalWidth ? [originalWidth] : [width, maxSize];
+	}
+	if (layout === 'responsive') {
+		return (
+			[
+				// Always include the image at 1x and 2x the specified width
+				width,
+				doubleWidth,
+				...breakpoints,
+			]
+				// Sort the resolutions in ascending order
+				.sort((a, b) => a - b)
+				// Filter out any resolutions that are larger than the double-resolution image or source image
+				.filter((w) => w <= maxSize)
+		);
+	}
+
+	return [];
+};
+
+/**
+ * Gets the `sizes` attribute for an image, based on the layout and width
+ */
+export const getSizes = ({
+	width,
+	layout,
+}: { width?: number; layout?: ImageLayout }): string | undefined => {
+	if (!width || !layout) {
+		return undefined;
+	}
+	switch (layout) {
+		// If screen is wider than the max size then image width is the max size,
+		// otherwise it's the width of the screen
+		case `responsive`:
+			return `(min-width: ${width}px) ${width}px, 100vw`;
+
+		// Image is always the same width, whatever the size of the screen
+		case `fixed`:
+			return `${width}px`;
+
+		// Image is always the width of the screen
+		case `full-width`:
+			return `100vw`;
+
+		case 'none':
+		default:
+			return undefined;
+	}
+};