diff --git a/packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts b/packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts
index e4f59c74b6b6c..0134b40cdff59 100644
--- a/packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts
+++ b/packages/gatsby-plugin-image/src/babel-plugin-parse-static-images.ts
@@ -50,7 +50,9 @@ export default function attrs({
         }
 
         // Adding the filename to the hashing, like in "extractStaticImageProps" function
-        props.filename = state.filename
+        if (state.filename) {
+          props.filename = slash(state.filename)
+        }
         const hash = hashOptions(props)
 
         const cacheDir = (this.opts as Record<string, string>)?.cacheDir
diff --git a/packages/gatsby-plugin-image/src/node-apis/parser.ts b/packages/gatsby-plugin-image/src/node-apis/parser.ts
index 700e6933ae26b..1c4ac2edd907d 100644
--- a/packages/gatsby-plugin-image/src/node-apis/parser.ts
+++ b/packages/gatsby-plugin-image/src/node-apis/parser.ts
@@ -3,6 +3,7 @@ import { NodePath } from "@babel/core"
 import { JSXOpeningElement } from "@babel/types"
 import { parse, ParserOptions } from "@babel/parser"
 import babel from "@babel/core"
+import { slash } from "gatsby-core-utils"
 import { evaluateImageAttributes, hashOptions } from "../babel-helpers"
 import { IStaticImageProps } from "../components/static-image.server"
 
@@ -96,7 +97,8 @@ export const extractStaticImageProps = (
       ) as unknown as IStaticImageProps
       // When the image props are the same for multiple StaticImage but they are in different locations
       // the hash will be the same then. We need to make sure that the hash is unique.
-      image.filename = filename
+      // The filename should already be normalized but better safe than sorry.
+      image.filename = slash(filename)
 
       images.set(hashOptions(image), image)
     },