diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
index 7f050deba3fd6..6a858d5d42928 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -57,6 +57,7 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
   as: Type = `div`,
   style,
   className,
+  class: preactClass,
   onStartLoad,
   image,
   onLoad: customOnLoad,
@@ -69,9 +70,8 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     }
     return null
   }
-  if (`class` in props) {
-    className = props.class
-    delete props.class
+  if (preactClass) {
+    className = preactClass
   }
   const { width, height, layout, images } = image
 
diff --git a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
index 20c298d5644cf..5e61eae3e95a5 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.server.tsx
@@ -18,6 +18,7 @@ export const GatsbyImageHydrator: FunctionComponent<{
 export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyImage({
   as,
   className,
+  class: preactClass,
   style,
   image,
   loading = `lazy`,
@@ -32,9 +33,8 @@ export const GatsbyImage: FunctionComponent<GatsbyImageProps> = function GatsbyI
     console.warn(`[gatsby-plugin-image] Missing image prop`)
     return null
   }
-  if (`class` in props) {
-    className = props.class
-    delete props.class
+  if (preactClass) {
+    className = preactClass
   }
   imgStyle = {
     objectFit,