diff --git a/docs/content/1.docs/2.features/image.md b/docs/content/1.docs/2.features/image.md
new file mode 100644
index 00000000..3a176944
--- /dev/null
+++ b/docs/content/1.docs/2.features/image.md
@@ -0,0 +1,88 @@
+---
+title: Image Transformation
+navigation.title: Image
+description: Add image transformation to your NuxtHub project.
+---
+
+## Getting Started
+
+Enable the image transformation in your NuxtHub project by adding the `image` property to the `hub` object in your `nuxt.config.ts` file.
+
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  hub: {
+    image: {
+      trustedDomains: ['hub.nuxt.com'],
+      templates: {
+        small: { width: 128, height: 128, format: 'webp' },
+        medium: { width: 512, height: 512, format: 'webp' }
+      }
+    }
+  }
+})
+```
+
+NuxtHub will add an specific route to your project to transform the image. The route is `/_hub/image/<template>/<source-image>`. For example, to transform an image with the `small` template, you can use the following URL:
+
+```html
+<img src="https://hub.nuxt.com/_hub/image/small/example-image.jpg" />
+```
+
+
+
+
+## Trusted Domains
+
+By default the image transformation is not allowed for any remote images and you can only transform images that are uploaded via `hubBlob()`. If you want to allow remote images, you can add the trusted domains to the `trustedDomains` option.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  hub: {
+    image: {
+      trustedDomains: ['hub.nuxt.com', 'example.com']
+    }
+  }
+})
+```
+
+## Templates
+
+In order to improve security and prevent service abuse, you need to define transformation templates for your images. You can define as many templates as you want. These templates will be used to transform the requested image.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  hub: {
+    image: {
+      templates: {
+        small: { width: 128, height: 128, format: 'webp' },
+        medium: { width: 512, height: 512, format: 'webp' }
+      }
+    }
+  }
+})
+```
+
+### Template Options
+
+The template options can be defined for each template.
+
+#### `width`
+
+The width of the transformed image in pixels.
+
+#### `height`
+
+The height of the transformed image in pixels.
+
+#### `format`
+
+The format of the transformed image. Can be `png`, `jpeg` or `webp`.
+
+#### `jpeg_quality`
+
+The quality of the JPEG image. This option is only used when the `format` is `jpeg`.
+
+#### `rotate`
+
+The angle of rotation in degrees.
diff --git a/package.json b/package.json
index 22ad27f6..659e0d88 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
+    "@cf-wasm/photon": "^0.1.24",
     "@cloudflare/workers-types": "^4.20240925.0",
     "@nuxt/devtools-kit": "^1.5.1",
     "@nuxt/kit": "^3.13.2",
@@ -55,6 +56,7 @@
     "ufo": "^1.5.4",
     "uncrypto": "^0.1.3",
     "unstorage": "^1.12.0",
+    "unwasm": "^0.3.9",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/playground/app/layouts/default.vue b/playground/app/layouts/default.vue
index afb457f4..60d10250 100644
--- a/playground/app/layouts/default.vue
+++ b/playground/app/layouts/default.vue
@@ -20,6 +20,7 @@ const links = [
   { label: 'AI', to: '/ai' },
   { label: 'Browser', to: '/browser' },
   { label: 'Blob', to: '/blob' },
+  { label: 'Image', to: '/image' },
   { label: 'Database', to: '/database' },
   { label: 'KV', to: '/kv' }
 ]
diff --git a/playground/app/pages/image.vue b/playground/app/pages/image.vue
new file mode 100644
index 00000000..3dfc69c7
--- /dev/null
+++ b/playground/app/pages/image.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+const source = ref<string>('https://hub.nuxt.com/images/landing/nuxthub-schema.png')
+const options = reactive({
+  width: 600,
+  height: 400,
+  format: 'webp',
+  rotate: 0
+})
+
+const { data: blobData } = await useFetch('/api/blob', {
+  query: {
+    folded: false,
+    limit: 4
+  },
+  deep: true
+})
+
+const imageSrc = computed(() => {
+  return `/_hub/image/${Object.entries(options).map(([key, value]) => `${key}=${value}`).join(',')}/${source.value}`
+})
+
+const files = computed(() => blobData.value?.blobs || [])
+</script>
+
+<template>
+  <UCard>
+    <div class="flex gap-4 mb-4">
+      <UFormGroup label="Width x Height">
+        <div class="flex gap-2">
+          <USelect
+            v-model="options.width"
+            :options="[300, 600, 900, 1200]"
+          />
+          x
+          <USelect
+            v-model="options.height"
+            :options="[200, 400, 600, 800]"
+          />
+        </div>
+      </UFormGroup>
+      <UFormGroup label="Rotate">
+        <USelect
+          v-model="options.rotate"
+          :options="[0, 90, 180, 270]"
+        />
+      </UFormGroup>
+      <UFormGroup label="Format">
+        <USelect
+          v-model="options.format"
+          :options="['webp', 'jpeg', 'png']"
+        />
+      </UFormGroup>
+    </div>
+    <div class="flex-1 h-96 flex items-center justify-center relative">
+      <UProgress animation="carousel" class="w-32 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
+
+      <img :key="imageSrc" :src="imageSrc" class="z-10 w-full h-full object-contain">
+    </div>
+    <div class="flex-2">
+      <div v-if="files?.length" class="flex overflow-scroll gap-2 mt-4">
+        <UCard
+          v-for="file of files"
+          :key="file.pathname"
+          :ui="{
+            body: {
+              base: 'space-y-0',
+              padding: ''
+            }
+          }"
+          class="overflow-hidden relative h-32 w-32 cursor-pointer"
+          @click="source = file.pathname"
+        >
+          <img v-if="file.contentType?.startsWith('image/')" :src="`/api/blob/${file.pathname}`" class="h-32 w-32 object-cover">
+        </UCard>
+      </div>
+      <UAlert v-else title="You don't have any files yet." />
+    </div>
+  </UCard>
+</template>
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
index 596839e5..fc445274 100644
--- a/playground/nuxt.config.ts
+++ b/playground/nuxt.config.ts
@@ -19,6 +19,13 @@ export default defineNuxtConfig({
     browser: true,
     kv: true,
     cache: true,
+    image: {
+      trustedDomains: ['hub.nuxt.com'],
+      templates: {
+        small: { width: 128, height: 128, format: 'webp' },
+        medium: { width: 512, height: 512, format: 'webp' }
+      }
+    },
     bindings: {
       compatibilityDate: '2024-10-02',
       compatibilityFlags: ['nodejs_compat']
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8cdd38c0..1ce6707e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@cf-wasm/photon':
+        specifier: ^0.1.24
+        version: 0.1.24
       '@cloudflare/workers-types':
         specifier: ^4.20240925.0
         version: 4.20240925.0
@@ -59,6 +62,9 @@ importers:
       unstorage:
         specifier: ^1.12.0
         version: 1.12.0(ioredis@5.4.1)
+      unwasm:
+        specifier: ^0.3.9
+        version: 0.3.9(webpack-sources@3.2.3)
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -185,7 +191,7 @@ importers:
         version: 2.18.4(focus-trap@7.6.0)(magicast@0.3.5)(rollup@4.21.3)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
       '@nuxthub/core':
         specifier: latest
-        version: 0.7.18(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.3)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(webpack-sources@3.2.3)
+        version: 0.7.20(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.3)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(webpack-sources@3.2.3)
       '@nuxtjs/mdc':
         specifier: ^0.9.0
         version: 0.9.0(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
@@ -207,7 +213,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: latest
-        version: 1.4.2(rollup@4.21.3)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
+        version: 1.5.1(rollup@4.21.3)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
 
 packages:
 
@@ -443,6 +449,12 @@ packages:
   '@capsizecss/unpack@2.3.0':
     resolution: {integrity: sha512-qkf9IoFIVTOkkpr8oZtCNSmubyWFCuPU4EOWO6J/rFPP5Ks2b1k1EHDSQRLwfokh6nCd7mJgBT2lhcuDCE6w4w==}
 
+  '@cf-wasm/internals@0.0.3':
+    resolution: {integrity: sha512-v6PmiQnJIrVvL2IdPg5aCqARSKw/U1JvFsms2cCt3Szx3/3EvtVVhN9MALCh6kZ2CV2fvzs3tmiYezRQ6JyqcQ==}
+
+  '@cf-wasm/photon@0.1.24':
+    resolution: {integrity: sha512-Vds3Ejcdrh74pEa+Q0MaILb9LeAw/x+1HcW4kV4TXvLmmOtTLPtm0yyn4T50l0LR6Iae4uLpfg7bpxjCPUpr6w==}
+
   '@cloudflare/kv-asset-handler@0.3.4':
     resolution: {integrity: sha512-YLPHc8yASwjNkmcDMQMY35yiWjoKAKnhUbPRszBRS0YgH+IXtsMp61j+yTcnCE3oO2DgP0U3iejLC8FTtKDC8Q==}
     engines: {node: '>=16.13'}
@@ -1253,6 +1265,9 @@ packages:
     resolution: {integrity: sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@farnabaz/mdc@0.8.3':
+    resolution: {integrity: sha512-gO9cAOzGHgFcU0ajs7bYangw/chsA2h8LK8PglnJyXzUX8s18RzhfJMhtZXRHTmzGsM71whWcSJvC6ACdhEr4w==}
+
   '@fastify/accept-negotiator@1.1.0':
     resolution: {integrity: sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==}
     engines: {node: '>=14'}
@@ -1356,6 +1371,7 @@ packages:
   '@koa/router@12.0.1':
     resolution: {integrity: sha512-ribfPYfHb+Uw3b27Eiw6NPqjhIhTpVFzEWLwyc/1Xp+DCdwRRyIlAUODX+9bPARF6aQtUu1+/PHzdNvRzcs/+Q==}
     engines: {node: '>= 12'}
+    deprecated: Use v12.0.2 or higher to fix the vulnerability issue
 
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
@@ -1531,15 +1547,12 @@ packages:
   '@nuxthq/studio@2.1.0':
     resolution: {integrity: sha512-RvBZ0HAYmbNRrJ9YZqT1KL7iZTfPAMjJcl1YqO+TqaF+87LbX7lxV/5DPWPwL5v1vVtFjlHIy/OmGYAfE26ppg==}
 
-  '@nuxthub/core@0.7.18':
-    resolution: {integrity: sha512-uRhEdc2huTLzKl+Fx4F9mmIsCOOjERSxKvZNrJFPMpeEQMHegT0qTIkqW5Ll3KRGVxQo1mWFZTam3nONH3/pTg==}
+  '@nuxthub/core@0.7.20':
+    resolution: {integrity: sha512-Rv9Cn31r/L/+peuXrRGyVA8naS5bKxvA1RQHiegDiBlzcJa3673fEYb76a9seah5wj50qjcV+iqdS1gTccaFNA==}
 
   '@nuxtjs/color-mode@3.5.1':
     resolution: {integrity: sha512-GRHF3WUwX6fXIiRVlngNq1nVDwrVuP6dWX1DRmox3QolzX0eH1oJEcFr/lAm1nkT71JVGb8mszho9w+yHJbePw==}
 
-  '@nuxtjs/mdc@0.8.3':
-    resolution: {integrity: sha512-FqvJFWkBN9u2FeWog+7+C0aIOx0WIu61TYgAXPmmIOVVua6s2mXQsMyF3fXY2M56QBIaYJzK/SYN+5FGr5GNTQ==}
-
   '@nuxtjs/mdc@0.9.0':
     resolution: {integrity: sha512-dkdfWK0C0gKjDI7Y2W23A9uWwky9pIlH/N1no2l9y+2DHBz4/7JDdXmxGivDXYvyaTb6xAi+53E6Xphlmai8+A==}
 
@@ -2220,9 +2233,6 @@ packages:
     peerDependencies:
       webpack: ^4 || ^5
 
-  '@uploadthing/mime-types@0.2.10':
-    resolution: {integrity: sha512-kz3F0oEgAyts25NAGXlUBCWh3mXonbSOQJFGFMawHuIgbUbnzXbe4w5WI+0XdneCbjNmikfWrdWrs8m/7HATfQ==}
-
   '@uploadthing/mime-types@0.3.0':
     resolution: {integrity: sha512-jN/XFvpKTzcd3MXT/9D9oxx05scnYiSYxAXF/e6hyg377zFducRxivU/kHyYTkpUZPTmOL5q9EQbOkUsXMlSMg==}
 
@@ -7244,6 +7254,12 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
+  '@cf-wasm/internals@0.0.3': {}
+
+  '@cf-wasm/photon@0.1.24':
+    dependencies:
+      '@cf-wasm/internals': 0.0.3
+
   '@cloudflare/kv-asset-handler@0.3.4':
     dependencies:
       mime: 3.0.0
@@ -7702,6 +7718,49 @@ snapshots:
     dependencies:
       levn: 0.4.1
 
+  '@farnabaz/mdc@0.8.3(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)':
+    dependencies:
+      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
+      '@shikijs/transformers': 1.17.7
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@vue/compiler-core': 3.5.6
+      consola: 3.2.3
+      debug: 4.3.7
+      defu: 6.1.4
+      destr: 2.0.3
+      detab: 3.0.2
+      github-slugger: 2.0.0
+      hast-util-to-string: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      micromark-util-sanitize-uri: 2.0.0
+      ohash: 1.1.4
+      parse5: 7.1.2
+      pathe: 1.1.2
+      property-information: 6.5.0
+      rehype-external-links: 3.0.0
+      rehype-raw: 7.0.0
+      rehype-slug: 6.0.0
+      rehype-sort-attribute-values: 5.0.0
+      rehype-sort-attributes: 5.0.0
+      remark-emoji: 5.0.1
+      remark-gfm: 4.0.0
+      remark-mdc: 3.2.1
+      remark-parse: 11.0.0
+      remark-rehype: 11.1.0
+      scule: 1.3.0
+      shiki: 1.17.7
+      ufo: 1.5.4
+      unified: 11.0.5
+      unist-builder: 4.0.0
+      unist-util-visit: 5.0.0
+      unwasm: 0.3.9(webpack-sources@3.2.3)
+    transitivePeerDependencies:
+      - magicast
+      - rollup
+      - supports-color
+      - webpack-sources
+
   '@fastify/accept-negotiator@1.1.0':
     optional: true
 
@@ -7882,7 +7941,7 @@ snapshots:
   '@nuxt/content@2.13.2(ioredis@5.4.1)(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.4)(eslint@9.11.1(jiti@1.21.6))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(terser@5.32.0)(typescript@5.6.2)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(webpack-sources@3.2.3))(rollup@4.21.3)(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
-      '@nuxtjs/mdc': 0.8.3(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
+      '@nuxtjs/mdc': '@farnabaz/mdc@0.8.3(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)'
       '@vueuse/core': 10.11.1(vue@3.5.6(typescript@5.6.2))
       '@vueuse/head': 2.0.0(vue@3.5.6(typescript@5.6.2))
       '@vueuse/nuxt': 10.11.1(magicast@0.3.5)(nuxt@3.13.2(@parcel/watcher@2.4.1)(@types/node@22.7.4)(eslint@9.11.1(jiti@1.21.6))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.21.3)(terser@5.32.0)(typescript@5.6.2)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(webpack-sources@3.2.3))(rollup@4.21.3)(vue@3.5.6(typescript@5.6.2))(webpack-sources@3.2.3)
@@ -8875,12 +8934,12 @@ snapshots:
       - utf-8-validate
       - webpack-sources
 
-  '@nuxthub/core@0.7.18(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.3)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(webpack-sources@3.2.3)':
+  '@nuxthub/core@0.7.20(ioredis@5.4.1)(magicast@0.3.5)(rollup@4.21.3)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(webpack-sources@3.2.3)':
     dependencies:
       '@cloudflare/workers-types': 4.20240909.0
       '@nuxt/devtools-kit': 1.4.2(magicast@0.3.5)(rollup@4.21.3)(vite@5.4.5(@types/node@22.7.4)(terser@5.32.0))(webpack-sources@3.2.3)
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
-      '@uploadthing/mime-types': 0.2.10
+      '@uploadthing/mime-types': 0.3.0
       citty: 0.1.6
       confbox: 0.1.7
       defu: 6.1.4
@@ -8929,49 +8988,6 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxtjs/mdc@0.8.3(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)':
-    dependencies:
-      '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
-      '@shikijs/transformers': 1.17.7
-      '@types/hast': 3.0.4
-      '@types/mdast': 4.0.4
-      '@vue/compiler-core': 3.5.6
-      consola: 3.2.3
-      debug: 4.3.7
-      defu: 6.1.4
-      destr: 2.0.3
-      detab: 3.0.2
-      github-slugger: 2.0.0
-      hast-util-to-string: 3.0.0
-      mdast-util-to-hast: 13.2.0
-      micromark-util-sanitize-uri: 2.0.0
-      ohash: 1.1.4
-      parse5: 7.1.2
-      pathe: 1.1.2
-      property-information: 6.5.0
-      rehype-external-links: 3.0.0
-      rehype-raw: 7.0.0
-      rehype-slug: 6.0.0
-      rehype-sort-attribute-values: 5.0.0
-      rehype-sort-attributes: 5.0.0
-      remark-emoji: 5.0.1
-      remark-gfm: 4.0.0
-      remark-mdc: 3.2.1
-      remark-parse: 11.0.0
-      remark-rehype: 11.1.0
-      scule: 1.3.0
-      shiki: 1.17.7
-      ufo: 1.5.4
-      unified: 11.0.5
-      unist-builder: 4.0.0
-      unist-util-visit: 5.0.0
-      unwasm: 0.3.9(webpack-sources@3.2.3)
-    transitivePeerDependencies:
-      - magicast
-      - rollup
-      - supports-color
-      - webpack-sources
-
   '@nuxtjs/mdc@0.9.0(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.21.3)(webpack-sources@3.2.3)
@@ -9838,8 +9854,6 @@ snapshots:
       - rollup
       - supports-color
 
-  '@uploadthing/mime-types@0.2.10': {}
-
   '@uploadthing/mime-types@0.3.0': {}
 
   '@vercel/nft@0.26.5':
@@ -10729,7 +10743,7 @@ snapshots:
   code-red@1.0.4:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       acorn: 8.12.1
       estree-walker: 3.0.3
       periscopic: 3.1.0
@@ -12257,7 +12271,7 @@ snapshots:
 
   is-reference@3.0.2:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
 
   is-ssh@1.4.0:
     dependencies:
@@ -13833,7 +13847,7 @@ snapshots:
 
   periscopic@3.1.0:
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       estree-walker: 3.0.3
       is-reference: 3.0.2
 
@@ -14874,7 +14888,7 @@ snapshots:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       acorn: 8.12.1
       aria-query: 5.3.1
       axobject-query: 4.1.0
@@ -15751,7 +15765,7 @@ snapshots:
 
   webpack@5.94.0(esbuild@0.23.1):
     dependencies:
-      '@types/estree': 1.0.5
+      '@types/estree': 1.0.6
       '@webassemblyjs/ast': 1.12.1
       '@webassemblyjs/wasm-edit': 1.12.1
       '@webassemblyjs/wasm-parser': 1.12.1
diff --git a/src/features.ts b/src/features.ts
index 7e0ac027..4d24889e 100644
--- a/src/features.ts
+++ b/src/features.ts
@@ -1,6 +1,6 @@
 import { execSync } from 'node:child_process'
 import type { Nuxt } from '@nuxt/schema'
-import { logger, addImportsDir, addServerImportsDir, addServerScanDir, createResolver } from '@nuxt/kit'
+import { logger, addImportsDir, addServerImportsDir, addServerScanDir, createResolver, useNitro } from '@nuxt/kit'
 import { joinURL } from 'ufo'
 import { join } from 'pathe'
 import { defu } from 'defu'
@@ -163,6 +163,40 @@ export function setupCache(nuxt: Nuxt) {
   addServerScanDir(resolve('./runtime/cache/server'))
 }
 
+export function setupImage(nuxt: Nuxt) {
+  // Add Server scanning
+  addServerScanDir(resolve('./runtime/image/server'))
+
+  nuxt.options.nitro.externals = nuxt.options.nitro.externals || {}
+  nuxt.options.nitro.externals.inline = nuxt.options.nitro.externals.inline || []
+  nuxt.options.nitro.externals.inline.push('@cf-wasm/photon')
+
+  nuxt.hook('ready', () => {
+    const nitro = useNitro()
+    const _addWasmSupport = (_nitro: typeof nitro) => {
+      if (nitro.options.experimental?.wasm) {
+        return
+      }
+      _nitro.options.externals = _nitro.options.externals || {}
+      _nitro.options.externals.inline = _nitro.options.externals.inline || []
+      _nitro.options.externals.inline.push(id => id.endsWith('.wasm'))
+      _nitro.hooks.hook('rollup:before', async (_, rollupConfig) => {
+        const { rollup: unwasm } = await import('unwasm/plugin')
+        rollupConfig.plugins = rollupConfig.plugins || []
+        ;(rollupConfig.plugins as any[]).push(
+          unwasm({
+            ...(_nitro.options.wasm as any)
+          })
+        )
+      })
+    }
+    _addWasmSupport(nitro)
+    nitro.hooks.hook('prerender:init', (prerenderer) => {
+      _addWasmSupport(prerenderer)
+    })
+  })
+}
+
 export function setupDatabase(_nuxt: Nuxt) {
   // Add Server scanning
   addServerScanDir(resolve('./runtime/database/server'))
diff --git a/src/module.ts b/src/module.ts
index d3d8b030..f6d95f79 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -8,7 +8,7 @@ import { parseArgs } from 'citty'
 import type { Nuxt } from '@nuxt/schema'
 import { version } from '../package.json'
 import { generateWrangler } from './utils/wrangler'
-import { setupAI, setupCache, setupAnalytics, setupBlob, setupBrowser, setupOpenAPI, setupDatabase, setupKV, setupBase, setupRemote } from './features'
+import { setupAI, setupCache, setupAnalytics, setupBlob, setupBrowser, setupOpenAPI, setupDatabase, setupKV, setupBase, setupRemote, setupImage } from './features'
 import type { ModuleOptions } from './types/module'
 import { addBuildHooks } from './utils/build'
 
@@ -59,6 +59,7 @@ export default defineNuxtModule<ModuleOptions>({
       cache: false,
       database: false,
       kv: false,
+      image: false,
       // Other options
       version,
       env: process.env.NUXT_HUB_ENV || 'production',
@@ -108,6 +109,7 @@ export default defineNuxtModule<ModuleOptions>({
     hub.cache && setupCache(nuxt)
     hub.database && setupDatabase(nuxt)
     hub.kv && setupKV(nuxt)
+    hub.image && setupImage(nuxt)
 
     // nuxt prepare, stop here
     if (nuxt.options._prepare) {
diff --git a/src/runtime/image/server/routes/_hub/image/[...params].get.ts b/src/runtime/image/server/routes/_hub/image/[...params].get.ts
new file mode 100644
index 00000000..df6d6194
--- /dev/null
+++ b/src/runtime/image/server/routes/_hub/image/[...params].get.ts
@@ -0,0 +1,125 @@
+import { createError, eventHandler, getValidatedRouterParams, setHeader } from 'h3'
+import { z } from 'zod'
+import { PhotonImage, SamplingFilter, resize, rotate, initAsync } from '@cf-wasm/photon/next'
+import photonWasmModule from '@cf-wasm/photon/photon.wasm?module'
+import { hubBlob } from '../../../../../blob/server/utils/blob'
+import { useRuntimeConfig } from '#imports'
+
+export default eventHandler(async (event) => {
+  const { image: imageOptions } = useRuntimeConfig().hub
+  const trustedDomains = imageOptions?.trustedDomains || []
+  const templates = imageOptions?.templates || {}
+  const { params } = await getValidatedRouterParams(event, z.object({
+    // match <OPTIONS>/<SOURCE-IMAGE>
+    params: z.string().regex(/^\/?[^/]*\/.+$/)
+  }).parse)
+
+  await initAsync(photonWasmModule)
+
+  const [template, ...sourceParts] = params.split('/')
+  let templateOptions = templates[template]
+
+  if (import.meta.dev && !templateOptions) {
+    console.warn(`[NuxtHub] Image template "${template}" not found in config, trying to parse option from URL. This is only supported in development mode.`)
+    templateOptions = parseOptions(template)
+  }
+
+  if (!templateOptions) {
+    throw createError({ statusCode: 400, message: 'Invalid image transformation' })
+  }
+
+  // create a PhotonImage instance
+  const inputBytes = await getImageBytes(sourceParts.join('/'), trustedDomains)
+  const inputImage = PhotonImage.new_from_byteslice(inputBytes)
+
+  let image: PhotonImage = resizeImage(inputImage, templateOptions)
+
+  if (templateOptions.rotate) {
+    const _image = image
+    // rotate image using photon
+    image = rotate(
+      _image,
+      Number(templateOptions.rotate)
+    )
+
+    _image.free()
+  }
+
+  const { format = 'webp' } = templateOptions
+  let outputBytes
+  switch (format) {
+    case 'png':
+      outputBytes = image.get_bytes()
+      break
+    case 'jpeg':
+      outputBytes = image.get_bytes_jpeg(templateOptions.jpeg_quality || 80)
+      break
+    case 'webp':
+    default:
+      outputBytes = image.get_bytes_webp()
+  }
+
+  // call free() method to free memory
+  image.free()
+
+  setHeader(event, 'Cache-Control', 'public, max-age=31536000, immutable')
+  setHeader(event, 'Content-Length', outputBytes.byteLength)
+  setHeader(event, 'Content-Type', `image/${format || 'webp'}`)
+  return outputBytes
+})
+
+function resizeImage(image: PhotonImage, templateOptions: Record<string, string>) {
+  if (templateOptions.width || templateOptions.height) {
+    const imageWidth = image.get_width()
+    const imageHeight = image.get_height()
+    const imageRatio = imageWidth / imageHeight
+    const width = templateOptions.width ? Number(templateOptions.width) : Number(templateOptions.height) * imageRatio
+    const height = templateOptions.height ? Number(templateOptions.height) : Number(templateOptions.width) / imageRatio
+
+    const _image = image
+    // resize image using photon
+    image = resize(
+      _image,
+      width,
+      height,
+      SamplingFilter.Lanczos3
+    )
+
+    _image.free()
+  }
+
+  return image
+}
+
+function parseOptions(options: string) {
+  const templateOptions: Record<string, string> = {}
+  options.split(',').forEach((option) => {
+    const [key, value] = option.split('=')
+    templateOptions[key] = value
+  })
+  return templateOptions
+}
+
+async function getImageBytes(source: string, trustedDomains: string[]) {
+  if (source.startsWith('http')) {
+    const hostname = new URL(source).hostname
+
+    if (!trustedDomains.includes(hostname)) {
+      if (import.meta.dev) {
+        console.warn(
+          `[NuxtHub] Retriving image from "${hostname}" is not allowed in production mode, consider adding "${hostname}" to trustedDomains in your config.`
+        )
+      } else {
+        throw createError({ statusCode: 403, message: 'Image not allowed' })
+      }
+    }
+
+    return await fetch(source)
+      .then(res => res.arrayBuffer())
+      .then(buffer => new Uint8Array(buffer))
+  }
+
+  return hubBlob().get(source)
+    .then(blob => blob!.arrayBuffer())
+    .then(buffer => new Uint8Array(buffer))
+}
diff --git a/src/runtime/image/server/tsconfig.json b/src/runtime/image/server/tsconfig.json
new file mode 100644
index 00000000..e7988a98
--- /dev/null
+++ b/src/runtime/image/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../../../.nuxt/tsconfig.server.json",
+}
diff --git a/src/types/module.ts b/src/types/module.ts
index 68650c66..22cb6f82 100644
--- a/src/types/module.ts
+++ b/src/types/module.ts
@@ -1,3 +1,11 @@
+interface ImageTemplate {
+  width?: number
+  height?: number
+  format?: string
+  rotate?: number
+  jpeg_quality?: number
+}
+
 export interface ModuleOptions {
   /**
    * Set `true` to enable AI for the project.
@@ -49,6 +57,16 @@ export interface ModuleOptions {
    * @see https://hub.nuxt.com/docs/features/kv
    */
   kv?: boolean
+  /**
+   * Set `true` to enable the Image transformation for the project.
+   *
+   * @default false
+   * @see https://hub.nuxt.com/docs/features/image
+   */
+  image?: false | {
+    trustedDomains?: string[]
+    templates: Record<string, ImageTemplate>
+  }
   /**
    * Set to `true`, 'preview' or 'production' to use the remote storage.
    * Only set the value on a project you are deploying outside of NuxtHub or Cloudflare.