diff --git a/packages/gatsby-plugin-image/gatsby-browser.js b/packages/gatsby-plugin-image/gatsby-browser.js
new file mode 100644
index 0000000000000..128583a12d676
--- /dev/null
+++ b/packages/gatsby-plugin-image/gatsby-browser.js
@@ -0,0 +1,11 @@
+const React = require("react")
+
+const { LaterHydrator } = require(".")
+
+exports.wrapRootElement = ({ element }) => {
+  return (
+    <LaterHydrator>
+      {element}
+    </LaterHydrator>
+  )
+}
\ No newline at end of file
diff --git a/packages/gatsby-plugin-image/src/components/later-hydrator.tsx b/packages/gatsby-plugin-image/src/components/later-hydrator.tsx
new file mode 100644
index 0000000000000..cc1c136cabcfa
--- /dev/null
+++ b/packages/gatsby-plugin-image/src/components/later-hydrator.tsx
@@ -0,0 +1,10 @@
+import * as React from "react"
+export function LaterHydrator({
+  children,
+}: React.PropsWithChildren<{}>): React.ReactNode {
+  React.useEffect(() => {
+    import(`./lazy-hydrate`)
+  }, [])
+
+  return children
+}
diff --git a/packages/gatsby-plugin-image/src/index.browser.ts b/packages/gatsby-plugin-image/src/index.browser.ts
index 62267d37606c9..a64d5b9968e8a 100644
--- a/packages/gatsby-plugin-image/src/index.browser.ts
+++ b/packages/gatsby-plugin-image/src/index.browser.ts
@@ -6,6 +6,7 @@ export {
 export { Placeholder } from "./components/placeholder"
 export { MainImage } from "./components/main-image"
 export { StaticImage } from "./components/static-image"
+export { LaterHydrator } from "./components/later-hydrator"
 export { getImage, getSrc, useGatsbyImage } from "./components/hooks"
 export {
   generateImageData,