diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index 5748bbe2..8ed823ec 100644
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@@ -13,9 +13,9 @@ jobs:
         node:
           - 18
           - 20
-        os:
-          - macos-latest
-          - windows-latest
+          - 22
+        os: 
+          - ubuntu-latest
     name: Node.js v${{ matrix.node }} on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     steps:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index d912d41a..9d2c321d 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js 20
+      - name: Use Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: 'npm'
       - run: npm ci
       - run: npm run build
diff --git a/.node-version b/.node-version
deleted file mode 100644
index d7568adf..00000000
--- a/.node-version
+++ /dev/null
@@ -1 +0,0 @@
-nodejs 20.11.1
diff --git a/.tool-versions b/.tool-versions
new file mode 100644
index 00000000..42738c54
--- /dev/null
+++ b/.tool-versions
@@ -0,0 +1 @@
+nodejs 22.12.0
diff --git a/__tests__/e2e/app/page.jsx b/__tests__/e2e/app/page.jsx
index bb15dba6..06fb05e4 100644
--- a/__tests__/e2e/app/page.jsx
+++ b/__tests__/e2e/app/page.jsx
@@ -1,15 +1,14 @@
+import React from 'react'
+
 import Image from '../../../image'
 import LegacyImage from '../../../legacy/image'
+import Picture from '../../../picture'
 import RemoteImage from '../../../remote-image'
 import RemotePicture from '../../../remote-picture'
-import React from 'react'
-
-import Picture from '../../../dist/components/picture'
 import ClientComponent from '../components/ClientComponent'
-
+import WithPropsComponent from '../components/WithPropsComponent'
 import imgSrc from '../images/img.png'
 import legacyImgSrc from '../images/legacy-img.png'
-import WithPropsComponent from '../components/WithPropsComponent'
 
 const id = 400
 
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 8785ecbe..733635f7 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -6514,15 +6514,10 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.3, nanoid@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
-  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
-
-nanoid@^3.3.7:
-  version "3.3.7"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
-  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+nanoid@^3.3.3, nanoid@^3.3.4, nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
 negotiator@0.6.3:
   version "0.6.3"
diff --git a/image.d.ts b/image.d.ts
index e6d03fe2..2de8c3ca 100644
--- a/image.d.ts
+++ b/image.d.ts
@@ -1,3 +1,3 @@
-import Image from './dist/components/image'
-export * from './dist/components/image'
+import Image from './dist/components/client/image'
+export * from './dist/components/client/image'
 export default Image
diff --git a/image.js b/image.js
index 73e30428..85fac4bf 100644
--- a/image.js
+++ b/image.js
@@ -1 +1 @@
-module.exports = require('./dist/components/image')
+module.exports = require('./dist/components/client/image')
diff --git a/legacy/image.d.ts b/legacy/image.d.ts
index 4832dfb2..942e5813 100644
--- a/legacy/image.d.ts
+++ b/legacy/image.d.ts
@@ -1,2 +1,2 @@
-import Image from '../dist/components/legacy-image'
+import Image from '../dist/components/client/legacy/image'
 export default Image
diff --git a/legacy/image.js b/legacy/image.js
index 11ec7b77..13eeb08d 100644
--- a/legacy/image.js
+++ b/legacy/image.js
@@ -1 +1 @@
-module.exports = require('../dist/components/legacy-image')
+module.exports = require('../dist/components/client/legacy/image')
diff --git a/package-lock.json b/package-lock.json
index eb534cd6..b1790b7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
         "@types/fs-extra": "11.0.4",
         "@types/jest": "29.5.14",
         "@types/lodash.uniqwith": "4.5.9",
-        "@types/node": "20.17.9",
+        "@types/node": "22.10.2",
         "@types/react": "npm:types-react@rc",
         "@types/recursive-readdir": "2.2.4",
         "@types/sharp": "0.32.0",
@@ -3784,13 +3784,13 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.17.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz",
-      "integrity": "sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==",
+      "version": "22.10.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.2.tgz",
+      "integrity": "sha512-Xxr6BBRCAOQixvonOye19wnzyDiUtTeqldOOmj3CkeblonbccA12PFwlufvRdrpjXxqnmUaeiU5EOA+7s5diUQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~6.19.2"
+        "undici-types": "~6.20.0"
       }
     },
     "node_modules/@types/normalize-package-data": {
@@ -15472,10 +15472,11 @@
       }
     },
     "node_modules/undici-types": {
-      "version": "6.19.8",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
-      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/unicorn-magic": {
       "version": "0.1.0",
diff --git a/package.json b/package.json
index d976d4ce..2b750423 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
     "@types/fs-extra": "11.0.4",
     "@types/jest": "29.5.14",
     "@types/lodash.uniqwith": "4.5.9",
-    "@types/node": "20.17.9",
+    "@types/node": "22.10.2",
     "@types/react": "npm:types-react@rc",
     "@types/recursive-readdir": "2.2.4",
     "@types/sharp": "0.32.0",
diff --git a/picture.d.ts b/picture.d.ts
index 90065d06..e56195ea 100644
--- a/picture.d.ts
+++ b/picture.d.ts
@@ -1,2 +1,2 @@
-import Picture from './dist/components/picture'
+import Picture from './dist/components/client/picture'
 export default Picture
diff --git a/picture.js b/picture.js
index 7ab8f431..522e781c 100644
--- a/picture.js
+++ b/picture.js
@@ -1 +1 @@
-module.exports = require('./dist/components/picture')
+module.exports = require('./dist/components/client/picture')
diff --git a/remote-image.d.ts b/remote-image.d.ts
index 8f32de57..6da51534 100644
--- a/remote-image.d.ts
+++ b/remote-image.d.ts
@@ -1,3 +1,3 @@
-import RemoteImage from './dist/components/remote-image'
-export * from './dist/components/remote-image'
+import RemoteImage from './dist/components/server/remote-image'
+export * from './dist/components/server/remote-image'
 export default RemoteImage
diff --git a/remote-image.js b/remote-image.js
index d03b095c..71a4baa2 100644
--- a/remote-image.js
+++ b/remote-image.js
@@ -1 +1 @@
-module.exports = require('./dist/components/remote-image')
+module.exports = require('./dist/components/server/remote-image')
diff --git a/remote-picture.d.ts b/remote-picture.d.ts
index d42e8d9d..da9e660c 100644
--- a/remote-picture.d.ts
+++ b/remote-picture.d.ts
@@ -1,3 +1,3 @@
-import RemotePicture from './dist/components/remote-picture'
-export * from './dist/components/remote-picture'
+import RemotePicture from './dist/components/server/remote-picture'
+export * from './dist/components/server/remote-picture'
 export default RemotePicture
diff --git a/remote-picture.js b/remote-picture.js
index cf7efe12..264445b6 100644
--- a/remote-picture.js
+++ b/remote-picture.js
@@ -1 +1 @@
-module.exports = require('./dist/components/remote-picture')
+module.exports = require('./dist/components/server/remote-picture')
diff --git a/src/components/image.tsx b/src/components/client/image.tsx
similarity index 81%
rename from src/components/image.tsx
rename to src/components/client/image.tsx
index a262b748..8b07e3ef 100644
--- a/src/components/image.tsx
+++ b/src/components/client/image.tsx
@@ -1,7 +1,7 @@
 import Image, { type ImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
-import getStringSrc from './utils/getStringSrc'
-import imageLoader from './utils/imageLoader'
+import getStringSrc from '../utils/getStringSrc'
+import imageLoader from '../utils/imageLoader'
 
 const CustomImage = forwardRef<HTMLImageElement, ImageProps>((props, forwardedRef) => {
   const srcStr = getStringSrc(props.src)
@@ -23,5 +23,5 @@ const CustomImage = forwardRef<HTMLImageElement, ImageProps>((props, forwardedRe
 })
 CustomImage.displayName = 'CustomImage'
 
-export { default as getOptimizedImageProps } from './utils/getOptimizedImageProps'
+export { default as getOptimizedImageProps } from '../utils/getOptimizedImageProps'
 export default CustomImage
diff --git a/src/components/legacy-image.tsx b/src/components/client/legacy/image.tsx
similarity index 90%
rename from src/components/legacy-image.tsx
rename to src/components/client/legacy/image.tsx
index 37597f61..24cfc3d5 100644
--- a/src/components/legacy-image.tsx
+++ b/src/components/client/legacy/image.tsx
@@ -1,6 +1,6 @@
 import Image, { type ImageProps } from 'next/image'
 import React from 'react'
-import imageLoader from './utils/imageLoader'
+import imageLoader from '../../utils/imageLoader'
 
 const CustomImage = (props: ImageProps) => {
   return (
diff --git a/src/components/picture.tsx b/src/components/client/picture.tsx
similarity index 90%
rename from src/components/picture.tsx
rename to src/components/client/picture.tsx
index 08afe434..4b9e30b2 100644
--- a/src/components/picture.tsx
+++ b/src/components/client/picture.tsx
@@ -1,8 +1,8 @@
 import Image, { type ImageProps, getImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
-import getConfig from '../utils/getConfig'
-import getStringSrc from './utils/getStringSrc'
-import imageLoader from './utils/imageLoader'
+import getConfig from '../../utils/getConfig'
+import getStringSrc from '../utils/getStringSrc'
+import imageLoader from '../utils/imageLoader'
 
 const config = getConfig()
 
diff --git a/src/components/remote-image.tsx b/src/components/server/remote-image.tsx
similarity index 91%
rename from src/components/remote-image.tsx
rename to src/components/server/remote-image.tsx
index 4a700aa5..a09643fc 100644
--- a/src/components/remote-image.tsx
+++ b/src/components/server/remote-image.tsx
@@ -4,10 +4,10 @@ import { appendFileSync } from 'fs-extra'
 import type { ImageConfigComplete } from 'next/dist/shared/lib/image-config'
 import type { ImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
-import type { Manifest } from '../cli'
-import buildOutputInfo from '../utils/buildOutputInfo'
-import getConfig from '../utils/getConfig'
-import Image from './image'
+import type { Manifest } from '../../cli'
+import buildOutputInfo from '../../utils/buildOutputInfo'
+import getConfig from '../../utils/getConfig'
+import Image from '../client/image'
 
 type RemoteImageProps = Omit<ImageProps, 'src'> & {
   src: string
diff --git a/src/components/remote-picture.tsx b/src/components/server/remote-picture.tsx
similarity index 91%
rename from src/components/remote-picture.tsx
rename to src/components/server/remote-picture.tsx
index 3a282b9b..738e157c 100644
--- a/src/components/remote-picture.tsx
+++ b/src/components/server/remote-picture.tsx
@@ -4,10 +4,10 @@ import { appendFileSync } from 'fs-extra'
 import type { ImageConfigComplete } from 'next/dist/shared/lib/image-config'
 import type { ImageProps } from 'next/image'
 import React, { forwardRef } from 'react'
-import type { Manifest } from '../cli'
-import buildOutputInfo from '../utils/buildOutputInfo'
-import getConfig from '../utils/getConfig'
-import Picture from './picture'
+import type { Manifest } from '../../cli'
+import buildOutputInfo from '../../utils/buildOutputInfo'
+import getConfig from '../../utils/getConfig'
+import Picture from '../client/picture'
 
 type RemotePictureProps = Omit<ImageProps, 'src'> & {
   src: string
diff --git a/tsup.config.js b/tsup.config.js
index 6f693809..67fa869b 100644
--- a/tsup.config.js
+++ b/tsup.config.js
@@ -26,23 +26,23 @@ export default defineConfig([
   {
     ...cfg,
     entry: {
-      'remote-image': 'src/components/remote-image.tsx',
-      'remote-picture': 'src/components/remote-picture.tsx',
+      'remote-image': 'src/components/server/remote-image.tsx',
+      'remote-picture': 'src/components/server/remote-picture.tsx',
     },
-    external: ['react', 'next', 'next-export-optimize-images', './image', './picture'],
-    outDir: 'dist/components',
+    external: ['next-export-optimize-images', '../client/image', '../client/picture'],
+    outDir: 'dist/components/server',
   },
 
   // Client Components
   {
     ...cfg,
     entry: {
-      image: 'src/components/image.tsx',
-      'legacy-image': 'src/components/legacy-image.tsx',
-      picture: 'src/components/picture.tsx',
+      image: 'src/components/client/image.tsx',
+      'legacy/image': 'src/components/client/legacy/image.tsx',
+      picture: 'src/components/client/picture.tsx',
     },
-    external: ['react', 'next', 'next-export-optimize-images'],
-    outDir: 'dist/components',
+    external: ['next-export-optimize-images'],
+    outDir: 'dist/components/client',
     esbuildOptions: (options) => {
       // Append "use client" to the top of the react entry point
       options.banner = {