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/client.d.ts

@@ -67,6 +67,9 @@ declare module 'astro:assets' {
 	export type RemoteImageProps = import('./dist/type-utils.js').Simplify<
 		import('./dist/assets/types.js').RemoteImageProps<ImgAttributes>
 	>;
+	export type RemoteImagePropsInferSize = import('./dist/type-utils.js').Simplify<
+		import('./dist/assets/types.js').RemoteImagePropsInferSize<ImgAttributes>
+	>;
 	export const { getImage, getConfiguredImageService, imageConfig, Image, Picture }: AstroAssets;
 }
 

packages/astro/components/Image.astro

@@ -1,12 +1,17 @@
 ---
-import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
+import {
+	getImage,
+	type LocalImageProps,
+	type RemoteImageProps,
+	type RemoteImagePropsInferSize,
+} from 'astro:assets';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
 import type { HTMLAttributes } from '../types';
 
 // The TypeScript diagnostic for JSX props uses the last member of the union to suggest props, so it would be better for
 // LocalImageProps to be last. Unfortunately, when we do this the error messages that remote images get are complete nonsense
 // Not 100% sure how to fix this, seems to be a TypeScript issue. Unfortunate.
-type Props = LocalImageProps | RemoteImageProps;
+type Props = LocalImageProps | RemoteImagePropsInferSize | RemoteImageProps;
 
 const props = Astro.props;
 

packages/astro/components/Picture.astro

@@ -1,11 +1,16 @@
 ---
-import { getImage, type LocalImageProps, type RemoteImageProps } from 'astro:assets';
+import {
+	getImage,
+	type LocalImageProps,
+	type RemoteImageProps,
+	type RemoteImagePropsInferSize,
+} 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';
 import type { HTMLAttributes } from '../types';
 
-type Props = (LocalImageProps | RemoteImageProps) & {
+type Props = (LocalImageProps | RemoteImagePropsInferSize | RemoteImageProps) & {
 	formats?: ImageOutputFormat[];
 	fallbackFormat?: ImageOutputFormat;
 	pictureAttributes?: HTMLAttributes<'picture'>;

packages/astro/src/assets/services/service.ts

@@ -5,6 +5,7 @@ import { DEFAULT_HASH_PROPS, DEFAULT_OUTPUT_FORMAT, VALID_SUPPORTED_FORMATS } fr
 import type { ImageOutputFormat, ImageTransform, UnresolvedSrcSetValue } from '../types.js';
 import { isESMImportedImage } from '../utils/imageKind.js';
 import { isRemoteAllowed } from '../utils/remotePattern.js';
+import probe from 'probe-image-size';
 
 export type ImageService = LocalImageService | ExternalImageService;
 
@@ -140,88 +141,88 @@ export type BaseServiceTransform = {
  */
 export const baseService: Omit<LocalImageService, 'transform'> = {
 	propertiesToHash: DEFAULT_HASH_PROPS,
-	validateOptions(options) {
-		// `src` is missing or is `undefined`.
-		if (!options.src || (typeof options.src !== 'string' && typeof options.src !== 'object')) {
-			throw new AstroError({
-				...AstroErrorData.ExpectedImage,
-				message: AstroErrorData.ExpectedImage.message(
-					JSON.stringify(options.src),
-					typeof options.src,
-					JSON.stringify(options, (_, v) => (v === undefined ? null : v))
-				),
-			});
-		}
-
-		if (!isESMImportedImage(options.src)) {
-			// User passed an `/@fs/` path or a filesystem path instead of the full image.
-			if (
-				options.src.startsWith('/@fs/') ||
-				(!isRemotePath(options.src) && !options.src.startsWith('/'))
-			) {
-				throw new AstroError({
-					...AstroErrorData.LocalImageUsedWrongly,
-					message: AstroErrorData.LocalImageUsedWrongly.message(options.src),
-				});
-			}
-
-			// For remote images, width and height are explicitly required as we can't infer them from the file
-			let missingDimension: 'width' | 'height' | 'both' | undefined;
-			if (!options.width && !options.height) {
-				missingDimension = 'both';
-			} else if (!options.width && options.height) {
-				missingDimension = 'width';
-			} else if (options.width && !options.height) {
-				missingDimension = 'height';
-			}
-
-			if (missingDimension) {
-				throw new AstroError({
-					...AstroErrorData.MissingImageDimension,
-					message: AstroErrorData.MissingImageDimension.message(missingDimension, options.src),
-				});
-			}
-		} else {
-			if (!VALID_SUPPORTED_FORMATS.includes(options.src.format as any)) {
-				throw new AstroError({
-					...AstroErrorData.UnsupportedImageFormat,
-					message: AstroErrorData.UnsupportedImageFormat.message(
-						options.src.format,
-						options.src.src,
-						VALID_SUPPORTED_FORMATS
-					),
-				});
-			}
-
-			if (options.widths && options.densities) {
-				throw new AstroError(AstroErrorData.IncompatibleDescriptorOptions);
-			}
-
-			// We currently do not support processing SVGs, so whenever the input format is a SVG, force the output to also be one
-			if (options.src.format === 'svg') {
-				options.format = 'svg';
-			}
-
-			if (
-				(options.src.format === 'svg' && options.format !== 'svg') ||
-				(options.src.format !== 'svg' && options.format === 'svg')
-			) {
-				throw new AstroError(AstroErrorData.UnsupportedImageConversion);
+	async validateOptions(options) {
+        // `src` is missing or is `undefined`.
+        if (!options.src || (typeof options.src !== 'string' && typeof options.src !== 'object')) {
+            throw new AstroError({
+                ...AstroErrorData.ExpectedImage,
+                message: AstroErrorData.ExpectedImage.message(
+                    JSON.stringify(options.src),
+                    typeof options.src,
+                    JSON.stringify(options)
+                ),
+            });
+        }
+
+        // Infer size for remote images if inferSize is true
+        if (options.inferSize && !isESMImportedImage(options.src)) {
+					try {
+							const result = await probe(options.src); // Directly probe the image URL
+							options.width = options.width || result.width;
+							options.height = options.height || result.height;
+					} catch {
+						throw new AstroError({
+							...AstroErrorData.FailedToProbeRemoteImage,
+							message: AstroErrorData.FailedToProbeRemoteImage.message(options.src),
+					});
+					}
 			}
-		}
-
-		// If the user didn't specify a format, we'll default to `webp`. It offers the best ratio of compatibility / quality
-		// In the future, hopefully we can replace this with `avif`, alas, Edge. See https://caniuse.com/avif
-		if (!options.format) {
-			options.format = DEFAULT_OUTPUT_FORMAT;
-		}
 
-		// Sometimes users will pass number generated from division, which can result in floating point numbers
-		if (options.width) options.width = Math.round(options.width);
-		if (options.height) options.height = Math.round(options.height);
-
-		return options;
-	},
+        // Handle local and ESM-imported images
+        if (!isESMImportedImage(options.src)) {
+            if (options.src.startsWith('/@fs/') || (!isRemotePath(options.src) && !options.src.startsWith('/'))) {
+                throw new AstroError({
+                    ...AstroErrorData.LocalImageUsedWrongly,
+                    message: AstroErrorData.LocalImageUsedWrongly.message(options.src),
+                });
+            }
+
+            if (!options.width || !options.height) {
+                const missingDimension = !options.width && !options.height ? 'both' :
+                                        !options.width ? 'width' : 'height';
+                throw new AstroError({
+                    ...AstroErrorData.MissingImageDimension,
+                    message: AstroErrorData.MissingImageDimension.message(missingDimension, options.src),
+                });
+            }
+        } else {
+            if (!VALID_SUPPORTED_FORMATS.includes(options.src.format)) {
+                throw new AstroError({
+                    ...AstroErrorData.UnsupportedImageFormat,
+                    message: AstroErrorData.UnsupportedImageFormat.message(
+                        options.src.format,
+                        options.src.src,
+                        VALID_SUPPORTED_FORMATS
+                    ),
+                });
+            }
+
+            if (options.widths && options.densities) {
+                throw new AstroError(AstroErrorData.IncompatibleDescriptorOptions);
+            }
+
+            if (options.src.format === 'svg') {
+                options.format = 'svg';
+            }
+
+            if ((options.src.format === 'svg' && options.format !== 'svg') ||
+                (options.src.format !== 'svg' && options.format === 'svg')) {
+                throw new AstroError(AstroErrorData.UnsupportedImageConversion);
+            }
+        }
+
+        // Default to 'webp' format if none is specified
+        options.format = options.format || DEFAULT_OUTPUT_FORMAT;
+
+        // Round width and height to avoid floating point numbers
+        if (options.width) options.width = Math.round(options.width);
+        if (options.height) options.height = Math.round(options.height);
+
+				// Delete inferSize so it doesn't become an attribute
+				if (options.inferSize) delete options.inferSize;
+
+        return options;
+    },
 	getHTMLAttributes(options) {
 		const { targetWidth, targetHeight } = getTargetDimensions(options);
 		const { src, width, height, format, quality, densities, widths, formats, ...attributes } =

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;
 };
 
 /**
@@ -188,4 +189,28 @@ export type RemoteImageProps<T> = WithRequired<ImageSharedProps<T>, 'width' | 'h
 	 * ```
 	 */
 	src: string;
+	/**
+	 * Option to allow remote images to have their dimensions inferred from the original. Behavior is behind an option due to potential performance consequences in SSR pages.
+	 * In this type inferSize is false or undefined so width and height are required
+	 */
+	inferSize?: false | undefined;
+};
+
+export type RemoteImagePropsInferSize<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;
+	/**
+	 * Option to allow remote images to have their dimensions inferred from the original. Behavior is behind an option due to potential performance consequences in SSR pages.
+	 * In this type inferSize must be true, so that width and height don't need to be required
+	 */
+	inferSize: true;
 };

packages/astro/src/core/errors/errors-data.ts

@@ -530,8 +530,22 @@ export const MissingImageDimension = {
 	message: (missingDimension: 'width' | 'height' | 'both', imageURL: string) =>
 		`Missing ${
 			missingDimension === 'both' ? 'width and height attributes' : `${missingDimension} attribute`
-		} for ${imageURL}. When using remote images, both dimensions are always required in order to avoid CLS.`,
-	hint: 'If your image is inside your `src` folder, you probably meant to import it instead. See [the Imports guide for more information](https://docs.astro.build/en/guides/imports/#other-assets).',
+		} for ${imageURL}. When using remote images, both dimensions are required unless in order to avoid CLS.`,
+	hint: 'If your image is inside your `src` folder, you probably meant to import it instead. See [the Imports guide for more information](https://docs.astro.build/en/guides/imports/#other-assets). You can also use `inferSize={true}` for remote images to get the original dimensions.',
+} satisfies ErrorData;
+/**
+ * @docs
+ * @message
+ * Failed to get the dimensions for `IMAGE_URL`.
+ * @description
+ * Probing the remote image's dimensions failed, this is typically caused by an incorrect URL or attempting to infer the size of an image in the public folder. Infering the size of images in public folder is not possible. Probing is done by the [probe-image-size](https://www.npmjs.com/package/probe-image-size) package.
+ */
+export const FailedToProbeRemoteImage = {
+	name: 'FailedToProbeRemoteImage',
+	title: 'Failed to probe remote image dimensions',
+	message: (imageURL: string) =>
+		`Failed to get the dimensions for ${imageURL}.`,
+	hint: 'Verify your image URL is accurate. If you are using an image in public folder, you will not be able to infer its size.',
 } satisfies ErrorData;
 /**
  * @docs

packages/astro/test/core-image-infersize.test.js

@@ -0,0 +1,71 @@
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+import { Writable } from 'node:stream';
+
+import { Logger } from '../dist/core/logger/core.js';
+import { loadFixture } from './test-utils.js';
+
+describe('astro:image:infersize', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+
+	describe('dev', () => {
+		/** @type {import('./test-utils').DevServer} */
+		let devServer;
+		/** @type {Array<{ type: any, level: 'error', message: string; }>} */
+		let logs = [];
+
+		before(async () => {
+			fixture = await loadFixture({
+				root: './fixtures/core-image-infersize/',
+			});
+
+			devServer = await fixture.startDevServer({
+				logger: new Logger({
+					level: 'error',
+					dest: new Writable({
+						objectMode: true,
+						write(event, _, callback) {
+							logs.push(event);
+							callback();
+						},
+					}),
+				}),
+			});
+		});
+
+		after(async () => {
+			await devServer.stop();
+		});
+
+		describe('inferSize works', () => {
+			let $;
+			before(async () => {
+				let res = await fixture.fetch('/');
+				let html = await res.text();
+				$ = cheerio.load(html);
+			});
+
+			it('Image component works', async () => {
+				let $img = $('img');
+				expect(
+					$img.attr('src').startsWith('/_image') && $img.attr('src').endsWith('f=webp')
+				).to.equal(true);
+			});
+
+			it('Picture component works', async () => {
+				let $img = $('picture img');
+				expect(
+					$img.attr('src').startsWith('/_image') && $img.attr('src').endsWith('f=png')
+				).to.equal(true);
+			});
+
+			it('getImage works', async () => {
+				let $img = $('#getImage');
+				expect(
+					$img.attr('src').startsWith('/_image') && $img.attr('src').endsWith('f=webp')
+				).to.equal(true);
+			});
+		});
+	});
+});

packages/astro/test/fixtures/core-image-infersize/astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	image: {
+		domains: ['avatars.githubusercontent.com'],
+	},
+});

packages/astro/test/fixtures/core-image-infersize/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@test/core-image-remark-infersize",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  },
+  "scripts": {
+    "dev": "astro dev"
+  }
+}