feat(gatsby-plugin-image): Make dimensions optional and default to constrained (#28662)

* Default to constrained

* Size defaults

* Fixed size defaults

* Update proptypes

* use fixed layout in tests

* update e2e

* update last e2e

Co-authored-by: Laurie <[email protected]>

Author: ascorbic

e2e-tests/gatsby-static-image/src/pages/constrained.js

@@ -6,28 +6,16 @@ import Layout from "../components/layout"
 const FluidPage = () => (
   <Layout>
     <div data-testid="image-fluid">
-      <StaticImage
-        src="../images/citrus-fruits.jpg"
-        layout="constrained"
-        alt="Citrus fruits"
-      />
+      <StaticImage src="../images/citrus-fruits.jpg" alt="Citrus fruits" />
     </div>
     <div data-testid="image-fluid-png">
-      <StaticImage
-        src="../images/gatsby-icon.png"
-        layout="constrained"
-        alt="Gatsby icon"
-      />
+      <StaticImage src="../images/gatsby-icon.png" alt="Gatsby icon" />
     </div>
     <div data-testid="image-fluid-relative">
-      <StaticImage
-        src="../../content/relative.jpg"
-        layout="constrained"
-        alt="Citrus fruits"
-      />
+      <StaticImage src="../../content/relative.jpg" alt="Citrus fruits" />
     </div>
     <div data-testid="invalid-image">
-      <StaticImage src="./does-not-exist.jpg" layout="constrained" />
+      <StaticImage src="./does-not-exist.jpg" />
     </div>
   </Layout>
 )

e2e-tests/gatsby-static-image/src/pages/fixed.js

@@ -9,20 +9,23 @@ const FluidPage = () => (
       <StaticImage
         src="../images/citrus-fruits.jpg"
         width={500}
+        layout="fixed"
         alt="Citrus fruits"
       />
     </div>
     <div data-testid="image-fixed-png">
       <StaticImage
         src="../images/gatsby-icon.png"
         width={500}
+        layout="fixed"
         alt="Gatsby Icon"
       />
     </div>
     <div data-testid="image-fixed-relative">
       <StaticImage
         src="../../content/relative.jpg"
         height={500}
+        layout="fixed"
         alt="Citrus fruits"
       />
     </div>

e2e-tests/path-prefix/src/pages/index.js

@@ -7,7 +7,11 @@ import Layout from "../components/layout"
 const IndexPage = () => (
   <Layout>
     <h1>Hi people</h1>
-    <StaticImage src="../images/gatsby-icon.png" alt="Gatsby icon"/>
+    <StaticImage
+      src="../images/gatsby-icon.png"
+      alt="Gatsby icon"
+      layout="fixed"
+    />
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
     <Link data-testid="page-2-link" to="/page-2/">

e2e-tests/production-runtime/src/components/header.js

@@ -17,7 +17,11 @@ const Header = ({ siteTitle }) => (
         padding: `1.45rem 1.0875rem`,
       }}
     >
-      <StaticImage src="../images/gatsby-icon.png" alt="Gatsby icon"/>
+      <StaticImage
+        src="../images/gatsby-icon.png"
+        alt="Gatsby icon"
+        layout="fixed"
+      />
       <h1 style={{ margin: 0 }}>
         <Link
           data-testid="index-link"

e2e-tests/visual-regression/src/pages/static-images/constrained.js

@@ -10,7 +10,6 @@ const Page = () => {
       <TestWrapper>
         <StaticImage
           src="../../images/cornwall.jpg"
-          layout="constrained"
           alt="cornwall"
           maxWidth={1024}
         />

e2e-tests/visual-regression/src/pages/static-images/fixed.js

@@ -14,6 +14,7 @@ const Page = () => {
           width={240}
           height={100}
           alt="cornwall"
+          layout="fixed"
         />
       </TestWrapper>
     </Layout>

packages/gatsby-plugin-image/README.md

@@ -111,15 +111,15 @@ const width = 300
 
 ### API
 
-The only required prop is `src`. The default type is `fixed`. The other props match those of [the new GatsbyImage component](#gatsbyimage). You can also pass in options which are forwarded to [`gatsbyImageData`](#graphql-resolver).
+The only required prop is `src`. The default type is `constrained`. The other props match those of [the new GatsbyImage component](#gatsbyimage). You can also pass in options which are forwarded to [`gatsbyImageData`](#graphql-resolver).
 
 ## GatsbyImage
 
 Speedy, optimized images without the work.
 
 GatsbyImage is a React component specially designed to give your users a great image experience. It combines speed and best practices.
 
-Note: GatsbyImage is not a drop-in replacement for `<img>`. It's optimized for fixed width/height images and images that stretch the full-width of a container. You can also build your own GatsbyImage component with the utilities we export from this package.
+Note: GatsbyImage is not a drop-in replacement for `<img>`. It's optimized for fixed width/height images and images that stretch the full-width of a container.
 
 ## Table of Contents
 
@@ -329,9 +329,9 @@ These arguments can be passed to the `gatsbyImageData()` resolver:
   - `NONE`: no placeholder. Set "background" to use a fixed background color.
   - `DOMINANT_COLOR`: a solid color, calculated from the dominant color of the image.
 - **layout**: The layout for the image.
-  - `FIXED`: (default) A static image size, that does not resize according to the screen width
+  - `CONSTRAINED`: (default) Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size.
+  - `FIXED`: A static image size, that does not resize according to the screen width
   - `FLUID`: The image resizes to fit its container. Pass a "sizes" option if it isn't going to be the full width of the screen.
-  - `CONSTRAINED`: Resizes to fit its container, up to a maximum width, at which point it will remain fixed in size.
 - **outputPixelDensities**: A list of image pixel densities to generate, for high-resolution (retina) screens. It will never generate images larger than the source, and will always include a 1x image.
   Default is `[ 0.25, 0.5, 1, 2 ]`, for fluid/constrained images, and `[ 1, 2 ]` for fixed. In this case, an image with a fluid layout and maxWidth = 400 would generate images at 100, 200, 400 and 800px wide
 - **sizes**: The "[sizes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)" attribute, passed to the `<img>` tag. This describes the display size of the image. This does not affect the generated images, but is used by the browser to decide which images to download. You can leave this blank for fixed images, or if the responsive image container will be the full width of the screen. In these cases we will generate an appropriate value. If, however, you are generating responsive images that are not the full width of the screen, you should provide a sizes property for best performance. You can alternatively pass this value to the component.

packages/gatsby-plugin-image/src/__tests__/image-utils.ts

@@ -24,6 +24,7 @@ const args: IGatsbyImageHelperArgs = {
   filename: `afile.jpg`,
   generateImageSource,
   width: 400,
+  layout: `fixed`,
   sourceMetadata: {
     width: 800,
     height: 600,

packages/gatsby-plugin-image/src/components/static-image.server.tsx

@@ -82,31 +82,26 @@ const checkDimensionProps: PropTypes.Validator<number> = (
   propName: keyof IStaticImageProps & IPrivateProps,
   ...rest
 ) => {
-  if (props.layout === `fluid` || props.layout === `constrained`) {
-    if (propName === `maxWidth` && !props[propName]) {
-      return new Error(
-        `The prop "${propName}" is required when layout is "${props.layout}"`
-      )
-    }
-    if ((propName === `width` || propName === `height`) && props[propName]) {
-      return new Error(
-        `"${propName}" ${props[propName]} may not be passed when layout is "${props.layout}"`
-      )
-    }
+  if (
+    props.layout !== `fixed` &&
+    (propName === `width` || propName === `height`) &&
+    props[propName]
+  ) {
+    return new Error(
+      `"${propName}" ${props[propName]} may not be passed when layout is "${
+        props.layout || `constrained`
+      }"`
+    )
   } else {
     if (
+      props.layout === `fixed` &&
       (propName === `maxWidth` || propName === `maxHeight`) &&
       props[propName]
     ) {
       return new Error(
         `"${propName}" may not be passed when layout is "${props.layout}"`
       )
     }
-    if (propName === `width` && !props[propName]) {
-      return new Error(
-        `The prop "${propName}" is required when layout is "${props.layout}"`
-      )
-    }
   }
   return PropTypes.number(props, propName, ...rest)
 }

packages/gatsby-plugin-image/src/image-utils.ts

@@ -142,7 +142,7 @@ export function generateImageData(
     pluginName,
     sourceMetadata,
     generateImageSource,
-    layout = `fixed`,
+    layout = `constrained`,
     fit,
     options,
     width,
@@ -279,7 +279,7 @@ export function calculateImageSizes(args: IImageSizeArgs): IImageSizes {
     height,
     maxHeight,
     filename,
-    layout = `fixed`,
+    layout = `constrained`,
     sourceMetadata: imgDimensions,
     reporter = { warn },
   } = args

packages/gatsby-plugin-sharp/src/image-data.ts

@@ -103,7 +103,7 @@ export async function generateImageData({
   cache,
 }: IImageDataArgs): Promise<IGatsbyImageData | undefined> {
   const {
-    layout = `fixed`,
+    layout = `constrained`,
     placeholder = `blurred`,
     tracedSVGOptions = {},
     transformOptions = {},
@@ -119,6 +119,23 @@ export async function generateImageData({
 
   const metadata = await getImageMetadata(file, placeholder === `dominantColor`)
 
+  if (layout === `fixed` && !args.width && !args.height) {
+    args.width = metadata.width
+  }
+
+  if (
+    layout !== `fixed` &&
+    !args.maxWidth &&
+    !args.maxHeight &&
+    metadata.width
+  ) {
+    if (layout === `constrained`) {
+      args.maxWidth = metadata.width
+    } else if (layout === `fluid`) {
+      args.maxWidth = Math.round(metadata.width / 2)
+    }
+  }
+
   const formats = new Set(args.formats)
   let useAuto = formats.has(``) || formats.has(`auto`) || formats.size === 0
 

packages/gatsby-transformer-sharp/src/customize-schema.js

@@ -398,7 +398,7 @@ const imageNodeType = ({
     args: {
       layout: {
         type: ImageLayoutType,
-        defaultValue: `fixed`,
+        defaultValue: `constrained`,
         description: stripIndent`
         The layout for the image.
         FIXED: A static image sized, that does not resize according to the screen width