From d796884fd1be50a2f96b4668e73940e29aef33d8 Mon Sep 17 00:00:00 2001
From: Laurie <laurie@gatsbyjs.com>
Date: Mon, 4 Jan 2021 11:50:48 -0500
Subject: [PATCH 1/2] add layoutwrapper to intial render when lazy-hydrate
 hasn't yet run

---
 .../src/components/gatsby-image.browser.tsx               | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

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 6a858d5d42928..4577b69413311 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -17,6 +17,7 @@ import {
 import { PlaceholderProps } from "./placeholder"
 import { MainImageProps } from "./main-image"
 import { Layout } from "../image-utils"
+import { LayoutWrapper } from "./layout-wrapper"
 
 // eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface GatsbyImageProps
@@ -203,10 +204,11 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
         backgroundColor,
       }}
       className={`${wClass}${className ? ` ${className}` : ``}`}
-      ref={root}
-      dangerouslySetInnerHTML={{ __html: `` }}
       suppressHydrationWarning
-    />
+    >
+      <LayoutWrapper layout={layout} width={width} height={height} />
+      <Type ref={root} dangerouslySetInnerHTML={{ __html: `` }} />
+    </Type>
   )
 }
 

From b1567ac2a9ec4d00fe225626a9c5af6599f516c5 Mon Sep 17 00:00:00 2001
From: Laurie <laurie@gatsbyjs.com>
Date: Tue, 5 Jan 2021 12:30:53 -0500
Subject: [PATCH 2/2] calculate sizer string

---
 .../src/components/gatsby-image.browser.tsx    | 13 ++++++++-----
 .../src/components/layout-wrapper.tsx          | 18 +++++++++++++++++-
 2 files changed, 25 insertions(+), 6 deletions(-)

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 4577b69413311..5ffb186dd004d 100644
--- a/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
+++ b/packages/gatsby-plugin-image/src/components/gatsby-image.browser.tsx
@@ -17,7 +17,7 @@ import {
 import { PlaceholderProps } from "./placeholder"
 import { MainImageProps } from "./main-image"
 import { Layout } from "../image-utils"
-import { LayoutWrapper } from "./layout-wrapper"
+import { getSizer } from "./layout-wrapper"
 
 // eslint-disable-next-line @typescript-eslint/interface-name-prefix
 export interface GatsbyImageProps
@@ -195,6 +195,8 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
     props,
   ])
 
+  const sizer = getSizer(layout, width, height)
+
   return (
     <Type
       {...wrapperProps}
@@ -204,11 +206,12 @@ export const GatsbyImageHydrator: FunctionComponent<GatsbyImageProps> = function
         backgroundColor,
       }}
       className={`${wClass}${className ? ` ${className}` : ``}`}
+      ref={root}
+      dangerouslySetInnerHTML={{
+        __html: sizer,
+      }}
       suppressHydrationWarning
-    >
-      <LayoutWrapper layout={layout} width={width} height={height} />
-      <Type ref={root} dangerouslySetInnerHTML={{ __html: `` }} />
-    </Type>
+    />
   )
 }
 
diff --git a/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx b/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx
index c4e9a728b55f9..2e66946a59430 100644
--- a/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx
+++ b/packages/gatsby-plugin-image/src/components/layout-wrapper.tsx
@@ -39,6 +39,23 @@ if (hasNativeLazyLoadSupport) {
   />
 )
 
+export function getSizer(
+  layout: Layout,
+  width: number,
+  height: number
+): string {
+  let sizer: string | null = null
+  if (layout === `fluid`) {
+    sizer = `<div aria-hidden="true" style="padding-top: ${
+      (height / width) * 100
+    }%;"></div>`
+  }
+  if (layout === `constrained`) {
+    sizer = `<div style="max-width: ${width}px; display: block;"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='${height}' width='${width}' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width: 100%; display: block; position: static;"></div>`
+  }
+  return sizer
+}
+
 export const LayoutWrapper: FunctionComponent<ILayoutWrapperProps> = function LayoutWrapper({
   layout,
   width,
@@ -68,7 +85,6 @@ export const LayoutWrapper: FunctionComponent<ILayoutWrapperProps> = function La
       </div>
     )
   }
-
   return (
     <Fragment>
       {sizer}