diff --git a/.changeset/wise-avocados-behave.md b/.changeset/wise-avocados-behave.md
new file mode 100644
index 0000000000..5258fb7816
--- /dev/null
+++ b/.changeset/wise-avocados-behave.md
@@ -0,0 +1,5 @@
+---
+'@backstage/cli': patch
+---
+
+Fix .webp import support by adding it to webpack loader config.
diff --git a/packages/cli/config/jest.js b/packages/cli/config/jest.js
index ee6f3d820d..45d744d7bc 100644
--- a/packages/cli/config/jest.js
+++ b/packages/cli/config/jest.js
@@ -213,7 +213,7 @@ async function getProjectConfig(targetPath, extraConfig, extraOptions) {
           },
         },
       ],
-      '\\.(bmp|gif|jpg|jpeg|png|ico|frag|xml|svg|eot|woff|woff2|ttf)$':
+      '\\.(bmp|gif|jpg|jpeg|png|ico|webp|frag|xml|svg|eot|woff|woff2|ttf)$':
         require.resolve('./jestFileTransform.js'),
       '\\.(yaml)$': require.resolve('./jestYamlTransform'),
     },
diff --git a/packages/cli/src/lib/bundler/transforms.ts b/packages/cli/src/lib/bundler/transforms.ts
index 75099bf430..addefacd6e 100644
--- a/packages/cli/src/lib/bundler/transforms.ts
+++ b/packages/cli/src/lib/bundler/transforms.ts
@@ -150,6 +150,7 @@ export const transforms = (options: TransformOptions): Transforms => {
         { and: [/\.svg$/, { not: [/\.icon\.svg$/] }] },
         /\.xml$/,
         /\.ico$/,
+        /\.webp$/,
       ],
       type: 'asset/resource',
       generator: {