diff --git a/.changeset/sharp-crews-pull.md b/.changeset/sharp-crews-pull.md
new file mode 100644
index 000000000..6b1ecd5da
--- /dev/null
+++ b/.changeset/sharp-crews-pull.md
@@ -0,0 +1,5 @@
+---
+'preact-cli': patch
+---
+
+Add support for avif images format
diff --git a/packages/cli/lib/commands/create.js b/packages/cli/lib/commands/create.js
index 7d4a73745..8cc1de779 100644
--- a/packages/cli/lib/commands/create.js
+++ b/packages/cli/lib/commands/create.js
@@ -31,7 +31,8 @@ const { addScripts, install, initGit } = require('../lib/setup');
 const { validateArgs } = require('./validate-args');
 
 const ORG = 'preactjs-templates';
-const RGX = /\.(woff2?|ttf|eot|jpe?g|ico|png|gif|webp|mp4|mov|ogg|webm)(\?.*)?$/i;
+const RGX =
+	/\.(woff2?|ttf|eot|jpe?g|ico|png|gif|webp|avif|mp4|mov|ogg|webm)(\?.*)?$/i;
 const isMedia = str => RGX.test(str);
 const capitalize = str => str.charAt(0).toUpperCase() + str.substring(1);
 
@@ -176,11 +177,7 @@ async function fetchTemplates() {
 		// If cache file doesn't exist, then hit the API and fetch the data
 		if (!existsSync(cacheFilePath)) {
 			const repos = await fetch(TEMPLATES_REPO_URL).then(r => r.json());
-			await writeFile(
-				cacheFilePath,
-				JSON.stringify(repos, null, 2),
-				'utf-8'
-			);
+			await writeFile(cacheFilePath, JSON.stringify(repos, null, 2), 'utf-8');
 		}
 
 		// update the cache file without blocking the rest of the tasks.
diff --git a/packages/cli/lib/lib/webpack/webpack-base-config.js b/packages/cli/lib/lib/webpack/webpack-base-config.js
index 67063aa3e..5a5100e2e 100644
--- a/packages/cli/lib/lib/webpack/webpack-base-config.js
+++ b/packages/cli/lib/lib/webpack/webpack-base-config.js
@@ -296,7 +296,7 @@ module.exports = function createBaseConfig(env) {
 					loader: require.resolve('raw-loader'),
 				},
 				{
-					test: /\.(svg|woff2?|ttf|eot|jpe?g|png|webp|gif|mp4|mov|ogg|webm)(\?.*)?$/i,
+					test: /\.(svg|woff2?|ttf|eot|jpe?g|png|webp|avif|gif|mp4|mov|ogg|webm)(\?.*)?$/i,
 					loader: isProd
 						? require.resolve('file-loader')
 						: require.resolve('url-loader'),
diff --git a/packages/cli/lib/lib/webpack/webpack-client-config.js b/packages/cli/lib/lib/webpack/webpack-client-config.js
index 232ed4634..df66951b7 100644
--- a/packages/cli/lib/lib/webpack/webpack-client-config.js
+++ b/packages/cli/lib/lib/webpack/webpack-client-config.js
@@ -59,7 +59,7 @@ async function clientConfig(env) {
 						/200\.html$/,
 						/\.esm.js$/,
 						/\.css$/,
-						/\.(png|jpg|svg|gif|webp)$/,
+						/\.(png|jpg|svg|gif|webp|avif)$/,
 					],
 					webpackCompilationPlugins: [
 						new webpack.DefinePlugin({
@@ -73,7 +73,12 @@ async function clientConfig(env) {
 		swInjectManifest.push(
 			new InjectManifest({
 				swSrc: swPath,
-				include: [/200\.html$/, /\.js$/, /\.css$/, /\.(png|jpg|svg|gif|webp)$/],
+				include: [
+					/200\.html$/,
+					/\.js$/,
+					/\.css$/,
+					/\.(png|jpg|svg|gif|webp|avif)$/,
+				],
 				exclude: [/\.esm\.js$/],
 			})
 		);