fix(gatsby-plugin-sharp): presentation sizes

packages/gatsby-plugin-sharp/src/__tests__/index.js

@@ -254,7 +254,7 @@ describe(`gatsby-plugin-sharp`, () => {
       })
 
       expect(result.presentationWidth).toEqual(20)
-      expect(result.presentationHeight).toEqual(10)
+      expect(result.presentationHeight).toEqual(20)
       expect(boundActionCreators.createJobV2).toMatchSnapshot()
     })
 

packages/gatsby-plugin-sharp/src/index.js

@@ -474,20 +474,6 @@ async function fluid({ file, args = {}, reporter, cache }) {
     )
   }
 
-  let presentationWidth, presentationHeight
-  if (fixedDimension === `maxWidth`) {
-    presentationWidth = Math.min(options.maxWidth, width)
-    presentationHeight = Math.round(presentationWidth * (height / width))
-  } else {
-    presentationHeight = Math.min(options.maxHeight, height)
-    presentationWidth = Math.round(presentationHeight * (width / height))
-  }
-
-  // If the users didn't set default sizes, we'll make one.
-  if (!options.sizes) {
-    options.sizes = `(max-width: ${presentationWidth}px) 100vw, ${presentationWidth}px`
-  }
-
   // Create sizes (in width) for the image if no custom breakpoints are
   // provided. If the max width of the container for the rendered markdown file
   // is 800px, the sizes would then be: 200, 400, 800, 1200, 1600.
@@ -588,6 +574,7 @@ async function fluid({ file, args = {}, reporter, cache }) {
   const fallbackSrc = _.minBy(images, image =>
     Math.abs(options[fixedDimension] - image[dimensionAttr])
   ).src
+
   const srcSet = images
     .map(image => `${image.src} ${Math.round(image.width)}w`)
     .join(`,\n`)
@@ -614,13 +601,31 @@ async function fluid({ file, args = {}, reporter, cache }) {
     }
   }
 
+  // calculate presentationSizes
+  const maxWidth = options.maxWidth
+    ? Math.min(options.maxWidth, width)
+    : undefined
+  const maxHeight = options.maxHeight
+    ? Math.min(options.maxHeight, height)
+    : undefined
+  const imageWithDensity1 = images.find(
+    image => maxWidth === image.width || maxHeight === image.height
+  )
+  const presentationWidth = imageWithDensity1.width
+  const presentationHeight = imageWithDensity1.height
+
+  // If the users didn't set default sizes, we'll make one.
+  const sizes =
+    options.sizes ??
+    `(max-width: ${presentationWidth}px) 100vw, ${presentationHeight}px`
+
   return {
     base64: base64Image && base64Image.src,
     aspectRatio: images[0].aspectRatio,
     src: fallbackSrc,
     srcSet,
     srcSetType,
-    sizes: options.sizes,
+    sizes,
     originalImg,
     originalName,
     density,