diff --git a/packages/gatsby-plugin-image/README.md b/packages/gatsby-plugin-image/README.md
index b7a2e8aef4aa1..825319d445b1d 100644
--- a/packages/gatsby-plugin-image/README.md
+++ b/packages/gatsby-plugin-image/README.md
@@ -111,7 +111,7 @@ 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
@@ -119,7 +119,7 @@ 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 ``. 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 ``. 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 `` 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.
diff --git a/packages/gatsby-plugin-image/src/__tests__/image-utils.ts b/packages/gatsby-plugin-image/src/__tests__/image-utils.ts
index 7d93f4e866188..56d9649da4323 100644
--- a/packages/gatsby-plugin-image/src/__tests__/image-utils.ts
+++ b/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,
diff --git a/packages/gatsby-plugin-image/src/components/static-image.server.tsx b/packages/gatsby-plugin-image/src/components/static-image.server.tsx
index e97a65a827f1f..e0d27b71746cc 100644
--- a/packages/gatsby-plugin-image/src/components/static-image.server.tsx
+++ b/packages/gatsby-plugin-image/src/components/static-image.server.tsx
@@ -82,19 +82,19 @@ const checkDimensionProps: PropTypes.Validator = (
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]
) {
@@ -102,11 +102,6 @@ const checkDimensionProps: PropTypes.Validator = (
`"${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)
}
diff --git a/packages/gatsby-plugin-image/src/image-utils.ts b/packages/gatsby-plugin-image/src/image-utils.ts
index e616768db03b4..5f99eada9c298 100644
--- a/packages/gatsby-plugin-image/src/image-utils.ts
+++ b/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
diff --git a/packages/gatsby-plugin-sharp/src/image-data.ts b/packages/gatsby-plugin-sharp/src/image-data.ts
index 68c4c5b441531..243cdf69e0490 100644
--- a/packages/gatsby-plugin-sharp/src/image-data.ts
+++ b/packages/gatsby-plugin-sharp/src/image-data.ts
@@ -103,7 +103,7 @@ export async function generateImageData({
cache,
}: IImageDataArgs): Promise {
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
diff --git a/packages/gatsby-transformer-sharp/src/customize-schema.js b/packages/gatsby-transformer-sharp/src/customize-schema.js
index 3f8df441b0e68..54421feca3dbe 100644
--- a/packages/gatsby-transformer-sharp/src/customize-schema.js
+++ b/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