Support AVIF input assets (#8518)

.changeset/five-doors-love.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Adds support for using AVIF (`.avif`) files with the Image component. Importing an AVIF file will now correctly return the same object shape as other image file types. See the [Image docs](https://docs.astro.build/en/guides/images/#update-existing-img-tags) for more information on the different properties available on the returned object.

packages/astro/client.d.ts

@@ -108,6 +108,10 @@ declare module '*.svg' {
 	const metadata: ImageMetadata;
 	export default metadata;
 }
+declare module '*.avif' {
+	const metadata: ImageMetadata;
+	export default metadata;
+}
 
 declare module 'astro:transitions' {
 	type TransitionModule = typeof import('./dist/transitions/index.js');

packages/astro/package.json

@@ -157,6 +157,7 @@
     "p-limit": "^4.0.0",
     "path-to-regexp": "^6.2.1",
     "preferred-pm": "^3.1.2",
+    "probe-image-size": "^7.2.3",
     "prompts": "^2.4.2",
     "rehype": "^12.0.1",
     "resolve": "^1.22.4",
@@ -197,6 +198,7 @@
     "@types/js-yaml": "^4.0.5",
     "@types/mime": "^3.0.1",
     "@types/mocha": "^10.0.1",
+    "@types/probe-image-size": "^7.2.0",
     "@types/prompts": "^2.4.4",
     "@types/resolve": "^1.20.2",
     "@types/send": "^0.17.1",

packages/astro/src/assets/consts.ts

@@ -1,21 +1,14 @@
 export const VIRTUAL_MODULE_ID = 'astro:assets';
 export const VIRTUAL_SERVICE_ID = 'virtual:image-service';
 export const VALID_INPUT_FORMATS = [
-	// TODO: `image-size` does not support the following formats, so users can't import them.
-	// However, it would be immensely useful to add, for three reasons:
-	// - `heic` and `heif` are common formats, especially among Apple users.
-	// - AVIF is a common format on the web that's bound to become more and more common.
-	// - It's totally reasonable for an user's provided image service to want to support more image types.
-	//'heic',
-	//'heif',
-	//'avif',
 	'jpeg',
 	'jpg',
 	'png',
 	'tiff',
 	'webp',
 	'gif',
 	'svg',
+	'avif',
 ] as const;
 /**
  * Valid formats that our base services support.
@@ -29,5 +22,6 @@ export const VALID_SUPPORTED_FORMATS = [
 	'webp',
 	'gif',
 	'svg',
+	'avif',
 ] as const;
 export const VALID_OUTPUT_FORMATS = ['avif', 'png', 'webp', 'jpeg', 'jpg', 'svg'] as const;

packages/astro/src/assets/utils/metadata.ts

@@ -1,8 +1,13 @@
+import probe from 'probe-image-size';
 import type { ImageInputFormat, ImageMetadata } from '../types.js';
-import imageSize from '../vendor/image-size/index.js';
 
 export async function imageMetadata(data: Buffer): Promise<Omit<ImageMetadata, 'src'> | undefined> {
-	const { width, height, type, orientation } = imageSize(data);
+	const result = probe.sync(data);
+	if (result === null) {
+		throw new Error('Failed to probe image size.');
+	}
+
+	const { width, height, type, orientation } = result;
 	const isPortrait = (orientation || 0) >= 5;
 
 	if (!width || !height || !type) {