diff --git a/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts b/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts
index 0afc1b642b0e5..32a88a9e6517f 100644
--- a/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts
+++ b/packages/gatsby-plugin-utils/src/polyfill-remote-file/utils/url-generator.ts
@@ -54,6 +54,8 @@ function appendUrlParamToSearchParams(
   searchParams.append(paramName, finalUrl)
 }
 
+const frontendHostName = process.env.IMAGE_CDN_HOSTNAME || ``
+
 export function generateFileUrl(
   {
     url,
@@ -78,7 +80,7 @@ export function generateFileUrl(
 
   appendUrlParamToSearchParams(parsedURL.searchParams, url)
 
-  return `${parsedURL.pathname}${parsedURL.search}`
+  return `${frontendHostName}${parsedURL.pathname}${parsedURL.search}`
 }
 
 export function generateImageUrl(
@@ -107,9 +109,11 @@ export function generateImageUrl(
     source.internal.contentDigest
   )
 
-  return `${parsedURL.pathname}${parsedURL.search}`
+  return `${frontendHostName}${parsedURL.pathname}${parsedURL.search}`
 }
 
+const routePrefix = process.env.IMAGE_CDN_ROUTE_PREFIX || `_gatsby`
+
 function generatePublicUrl(
   {
     url,
@@ -130,7 +134,9 @@ function generatePublicUrl(
 
   let publicUrl =
     pathPrefix +
-    (mimeType && isImage({ mimeType }) ? `/_gatsby/image/` : `/_gatsby/file/`)
+    (mimeType && isImage({ mimeType })
+      ? `/${routePrefix}/image/`
+      : `/${routePrefix}/file/`)
 
   publicUrl += `${remoteUrl}`