diff --git a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
index 845941430eefa..6f428bc9a8c63 100644
--- a/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/__tests__/gatsby-image.server.tsx
@@ -332,6 +332,7 @@ icon.svg`,
         <picture>
           <source
             media="some-media"
+            sizes="192x192"
             srcset="icon32px.png 32w,icon64px.png 64w,icon-retina.png 2x,icon-ultra.png 3x,icon.svg"
           />
           <img
diff --git a/packages/gatsby-plugin-image/src/components/picture.tsx b/packages/gatsby-plugin-image/src/components/picture.tsx
index 8b0cfd740f44c..2ab119eb7589c 100644
--- a/packages/gatsby-plugin-image/src/components/picture.tsx
+++ b/packages/gatsby-plugin-image/src/components/picture.tsx
@@ -66,14 +66,15 @@ const Image: FunctionComponent<ImageProps> = function Image({
 
 export const Picture = forwardRef<HTMLImageElement, PictureProps>(
   function Picture(
-    { fallback, sources = [], shouldLoad = true, sizes, ...props },
+    { fallback, sources = [], shouldLoad = true, ...props },
     ref
   ) {
+    const sizes = props.sizes || fallback?.sizes
     const fallbackImage = (
       <Image
-        sizes={sizes}
         {...props}
         {...fallback}
+        sizes={sizes}
         shouldLoad={shouldLoad}
         innerRef={ref}
       />