diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md
index d59b9338f8abc..918d9100f5de2 100644
--- a/docs/basic-features/image-optimization.md
+++ b/docs/basic-features/image-optimization.md
@@ -98,7 +98,7 @@ To protect your application from malicious users, you must define a list of remo
 ```js
 module.exports = {
   images: {
-    domains: ['example.com', 'example2.com'],
+    domains: ['example.com', 'example2.com', '*.example.com'],
   },
 }
 ```
diff --git a/packages/next/package.json b/packages/next/package.json
index c06afd862a7e1..53a7df6e29b95 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -75,6 +75,7 @@
     "@next/react-refresh-utils": "12.0.8-canary.13",
     "caniuse-lite": "^1.0.30001283",
     "jest-worker": "27.0.0-next.5",
+    "micromatch": "4.0.4",
     "node-fetch": "2.6.1",
     "postcss": "8.2.15",
     "react-is": "17.0.2",
diff --git a/packages/next/server/image-optimizer.ts b/packages/next/server/image-optimizer.ts
index a40ce81048577..83bb6ae0ec47d 100644
--- a/packages/next/server/image-optimizer.ts
+++ b/packages/next/server/image-optimizer.ts
@@ -4,6 +4,7 @@ import { createReadStream, promises } from 'fs'
 import { getOrientation, Orientation } from 'next/dist/compiled/get-orientation'
 import imageSizeOf from 'next/dist/compiled/image-size'
 import { IncomingMessage, ServerResponse } from 'http'
+import micromatch from 'micromatch'
 // @ts-ignore no types for is-animated
 import isAnimated from 'next/dist/compiled/is-animated'
 import contentDisposition from 'next/dist/compiled/content-disposition'
@@ -109,7 +110,7 @@ export async function imageOptimizer(
       return { finished: true }
     }
 
-    if (!domains.includes(hrefParsed.hostname)) {
+    if (!micromatch.isMatch(hrefParsed.hostname, domains)) {
       res.statusCode = 400
       res.end('"url" parameter is not allowed')
       return { finished: true }
diff --git a/test/integration/image-optimizer/test/index.test.js b/test/integration/image-optimizer/test/index.test.js
index 89f9cd36d7fff..85fb70d9c3a76 100644
--- a/test/integration/image-optimizer/test/index.test.js
+++ b/test/integration/image-optimizer/test/index.test.js
@@ -1036,6 +1036,7 @@ describe('Image Optimizer', () => {
     'example.com',
     'assets.vercel.com',
     'image-optimization-test.vercel.app',
+    '*.vercel.app',
   ]
 
   describe('Server support for minimumCacheTTL in next.config.js', () => {