diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 4c3fd33435fc1..c1b3f300376e6 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -122,7 +122,7 @@ let {
 imageConfigDefault
 
 function setImageConfig(imagesConfig: ImageConfigComplete) {
-  if (!imagesConfig || process.env.__NEXT_IMAGE_OPTS) return
+  if (!imagesConfig) return
 
   configDeviceSizes = imagesConfig.deviceSizes
   configImageSizes = imagesConfig.imageSizes
diff --git a/packages/next/server/base-server.ts b/packages/next/server/base-server.ts
index 0d28b29ae6be5..a0027f203b878 100644
--- a/packages/next/server/base-server.ts
+++ b/packages/next/server/base-server.ts
@@ -58,6 +58,7 @@ import { MIDDLEWARE_ROUTE } from '../lib/constants'
 import { addRequestMeta, getRequestMeta } from './request-meta'
 import { createHeaderRoute, createRedirectRoute } from './server-route-utils'
 import { PrerenderManifest } from '../build'
+import { ImageConfigComplete } from './image-config'
 
 export type FindComponentsResult = {
   components: LoadComponentsReturnType
@@ -145,7 +146,7 @@ export default abstract class Server {
     ampOptimizerConfig?: { [key: string]: any }
     basePath: string
     optimizeFonts: boolean
-    images: string
+    images: ImageConfigComplete
     fontManifest?: FontManifest
     optimizeImages: boolean
     disableOptimizedLoading?: boolean
@@ -295,7 +296,7 @@ export default abstract class Server {
       customServer: customServer === true ? true : undefined,
       ampOptimizerConfig: this.nextConfig.experimental.amp?.optimizer,
       basePath: this.nextConfig.basePath,
-      images: JSON.stringify(this.nextConfig.images),
+      images: this.nextConfig.images,
       optimizeFonts: !!this.nextConfig.optimizeFonts && !dev,
       fontManifest:
         this.nextConfig.optimizeFonts && !dev
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
index fd7d11e90fbba..3c5da8b449971 100644
--- a/packages/next/server/render.tsx
+++ b/packages/next/server/render.tsx
@@ -62,6 +62,7 @@ import RenderResult from './render-result'
 import isError from '../lib/is-error'
 import { readableStreamTee } from './web/utils'
 import { ImageConfigContext } from '../shared/lib/image-config-context'
+import { ImageConfigComplete } from './image-config'
 
 let optimizeAmp: typeof import('./optimize-amp').default
 let getFontDefinitionFromManifest: typeof import('./font-utils').getFontDefinitionFromManifest
@@ -233,7 +234,7 @@ export type RenderOptsPartial = {
   serverComponents?: boolean
   customServer?: boolean
   crossOrigin?: string
-  images: string
+  images: ImageConfigComplete
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
@@ -716,9 +717,7 @@ export async function renderToHTML(
             value={(moduleName) => reactLoadableModules.push(moduleName)}
           >
             <StyleRegistry registry={jsxStyleRegistry}>
-              <ImageConfigContext.Provider
-                value={images ? JSON.parse(images) : null}
-              >
+              <ImageConfigContext.Provider value={images}>
                 {children}
               </ImageConfigContext.Provider>
             </StyleRegistry>