Add inferSize to getImage so width and height are optional for remote images

.changeset/tame-cameras-change.md

@@ -0,0 +1,17 @@
+---
+"astro": minor
+---
+
+Remote images can now have their dimensions inferred just like local images, allow width and height to be optional when inferSize is set to true.
+
+```astro
+---
+import { Image, Picture, getImage } from 'astro:assets';
+const myPic = await getImage({src: "https://example.com/example.png", inferSize: true, alt: ""})
+---
+<Image src="https://example.com/example.png" inferSize={true} alt="">
+<Picture src="https://example.com/example.png" inferSize={true} alt="">
+```
+
+
+> added to trigger tests

packages/astro/components/Image.astro

@@ -1,5 +1,9 @@
 ---
-import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
+import {
+	getImage,
+	type LocalImageProps,
+	type RemoteImageProps,
+} from 'astro:assets';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
 import type { HTMLAttributes } from '../types';
 

packages/astro/components/Picture.astro

@@ -1,5 +1,9 @@
 ---
-import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
+import {
+	getImage,
+	type LocalImageProps,
+	type RemoteImageProps,
+} from 'astro:assets';
 import type { GetImageResult, ImageOutputFormat } from '../dist/@types/astro';
 import { isESMImportedImage } from '../dist/assets/utils/imageKind';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';

packages/astro/src/assets/internal.ts

@@ -9,6 +9,7 @@ import type {
 	UnresolvedImageTransform,
 } from './types.js';
 import { isESMImportedImage, isRemoteImage } from './utils/imageKind.js';
+import { probe } from "./utils/remoteProbe.js"
 
 export async function getConfiguredImageService(): Promise<ImageService> {
 	if (!globalThis?.astroAsset?.imageService) {
@@ -61,6 +62,21 @@ export async function getImage(
 				: options.src,
 	};
 
+	// Infer size for remote images if inferSize is true
+	if (options.inferSize && isRemoteImage(resolvedOptions.src)) {
+		try {
+			const result = await probe(resolvedOptions.src); // Directly probe the image URL
+			resolvedOptions.width ??= result.width;
+			resolvedOptions.height ??= result.height;
+			delete resolvedOptions.inferSize; // Delete so it doesn't end up in the attributes
+		} catch {
+			throw new AstroError({
+				...AstroErrorData.FailedToProbeRemoteImage,
+				message: AstroErrorData.FailedToProbeRemoteImage.message(resolvedOptions.src),
+			});
+		}
+	}
+
 	const originalPath = isESMImportedImage(resolvedOptions.src)
 		? resolvedOptions.src.fsPath
 		: resolvedOptions.src;

packages/astro/src/assets/types.ts

@@ -59,6 +59,7 @@ export type SrcSetValue = UnresolvedSrcSetValue & {
  */
 export type UnresolvedImageTransform = Omit<ImageTransform, 'src'> & {
 	src: ImageMetadata | string | Promise<{ default: ImageMetadata }>;
+	inferSize?: boolean;
 };
 
 /**
@@ -176,16 +177,38 @@ export type LocalImageProps<T> = ImageSharedProps<T> & {
 	quality?: ImageQuality;
 };
 
-export type RemoteImageProps<T> = WithRequired<ImageSharedProps<T>, 'width' | 'height'> & {
-	/**
-	 * URL of a remote image. Can start with a protocol (ex: `https://`) or alternatively `/`, or `Astro.url`, for images in the `public` folder
-	 *
-	 * Remote images are not optimized, and require both `width` and `height` to be set.
-	 *
-	 * **Example**:
-	 * ```
-	 * <Image src="https://example.com/image.png" width={450} height={300} alt="..." />
-	 * ```
-	 */
-	src: string;
-};
+export type RemoteImageProps<T> =
+	| (ImageSharedProps<T> & {
+			/**
+			 * URL of a remote image. Can start with a protocol (ex: `https://`) or alternatively `/`, or `Astro.url`, for images in the `public` folder
+			 *
+			 * Remote images are not optimized, and require both `width` and `height` to be set.
+			 *
+			 * **Example**:
+			 * ```
+			 * <Image src="https://example.com/image.png" width={450} height={300} alt="..." />
+			 * ```
+			 */
+			src: string;
+			/**
+			 * When inferSize is true width and height are not required
+			 */
+			inferSize: true;
+	  })
+	| (WithRequired<ImageSharedProps<T>, 'width' | 'height'> & {
+			/**
+			 * URL of a remote image. Can start with a protocol (ex: `https://`) or alternatively `/`, or `Astro.url`, for images in the `public` folder
+			 *
+			 * Remote images are not optimized, and require both `width` and `height` to be set.
+			 *
+			 * **Example**:
+			 * ```
+			 * <Image src="https://example.com/image.png" width={450} height={300} alt="..." />
+			 * ```
+			 */
+			src: string;
+			/**
+			 * When inferSize is false or undefined width and height are required
+			 */
+			inferSize?: false | undefined;
+	  });