The legacy image processing APIs (fixed and fluid) are deprecated in favor of the modern gatsbyImageData API and gatsby-plugin-image. These APIs are maintained for backward compatibility but should not be used in new projects.
⚠️ Deprecation Notice: The fixed and fluid resolvers are deprecated. Use gatsbyImageData with gatsby-plugin-image for better performance and a simpler API.
Creates fixed-size images with specific pixel dimensions that don't resize with the viewport.
/**
* Generate fixed-size image data (deprecated)
* Available as a GraphQL field on ImageSharp nodes
* @deprecated Use gatsbyImageData with layout: FIXED instead
*/
fixed(
/** Fixed width in pixels */
width?: Int,
/** Fixed height in pixels */
height?: Int,
/** Width for base64 placeholder */
base64Width?: Int,
/** Enable progressive JPG (default: true) */
jpegProgressive?: Boolean,
/** PNG compression speed (1-10, default: 4) */
pngCompressionSpeed?: Int,
/** Convert to grayscale (default: false) */
grayscale?: Boolean,
/** Apply duotone effect */
duotone?: DuotoneGradient,
/** Traced SVG options (deprecated, falls back to base64) */
traceSVG?: Potrace,
/** Overall quality (1-100) */
quality?: Int,
/** JPG quality (1-100) */
jpegQuality?: Int,
/** PNG quality (1-100) */
pngQuality?: Int,
/** WebP quality (1-100) */
webpQuality?: Int,
/** Output format conversion */
toFormat?: ImageFormat,
/** Base64 placeholder format */
toFormatBase64?: ImageFormat,
/** Crop focus area (default: ATTENTION) */
cropFocus?: ImageCropFocus,
/** Resize behavior (default: COVER) */
fit?: ImageFit,
/** Background color (default: "rgba(0,0,0,1)") */
background?: String,
/** Rotation angle in degrees (default: 0) */
rotate?: Int,
/** Trim threshold (default: false) */
trim?: Float
): ImageSharpFixed;
interface ImageSharpFixed {
/** Base64-encoded placeholder */
base64?: string;
/** Deprecated traced SVG placeholder (returns base64) */
tracedSVG?: string;
/** Aspect ratio (width/height) */
aspectRatio?: number;
/** Image width in pixels */
width: number;
/** Image height in pixels */
height: number;
/** Primary image source URL */
src: string;
/** Responsive srcSet for different pixel densities */
srcSet: string;
/** WebP version of src (if applicable) */
srcWebp?: string;
/** WebP version of srcSet (if applicable) */
srcSetWebp?: string;
/** Original filename */
originalName?: string;
}Usage Examples:
# Basic fixed image
query {
file(relativePath: { eq: "logo.png" }) {
childImageSharp {
fixed(width: 200, height: 100) {
...GatsbyImageSharpFixed
}
}
}
}
# Fixed image with WebP support
query {
file(relativePath: { eq: "icon.jpg" }) {
childImageSharp {
fixed(width: 64, height: 64, quality: 90) {
...GatsbyImageSharpFixed_withWebp
}
}
}
}Creates responsive images that scale with their container while maintaining aspect ratio.
/**
* Generate responsive fluid image data (deprecated)
* Available as a GraphQL field on ImageSharp nodes
* @deprecated Use gatsbyImageData with layout: CONSTRAINED instead
*/
fluid(
/** Maximum width in pixels */
maxWidth?: Int,
/** Maximum height in pixels */
maxHeight?: Int,
/** Width for base64 placeholder */
base64Width?: Int,
/** Convert to grayscale (default: false) */
grayscale?: Boolean,
/** Enable progressive JPG (default: true) */
jpegProgressive?: Boolean,
/** PNG compression speed (1-10, default: 4) */
pngCompressionSpeed?: Int,
/** Apply duotone effect */
duotone?: DuotoneGradient,
/** Traced SVG options (deprecated, falls back to base64) */
traceSVG?: Potrace,
/** Overall quality (1-100) */
quality?: Int,
/** JPG quality (1-100) */
jpegQuality?: Int,
/** PNG quality (1-100) */
pngQuality?: Int,
/** WebP quality (1-100) */
webpQuality?: Int,
/** Output format conversion */
toFormat?: ImageFormat,
/** Base64 placeholder format */
toFormatBase64?: ImageFormat,
/** Crop focus area (default: ATTENTION) */
cropFocus?: ImageCropFocus,
/** Resize behavior (default: COVER) */
fit?: ImageFit,
/** Background color (default: "rgba(0,0,0,1)") */
background?: String,
/** Rotation angle in degrees (default: 0) */
rotate?: Int,
/** Trim threshold (default: false) */
trim?: Float,
/** Sizes attribute for responsive images */
sizes?: String,
/** Custom breakpoints for srcSet generation */
srcSetBreakpoints?: Int[]
): ImageSharpFluid;
interface ImageSharpFluid {
/** Base64-encoded placeholder */
base64?: string;
/** Deprecated traced SVG placeholder (returns base64) */
tracedSVG?: string;
/** Aspect ratio (width/height) */
aspectRatio: number;
/** Primary image source URL */
src: string;
/** Responsive srcSet for different widths */
srcSet: string;
/** WebP version of src (if applicable) */
srcWebp?: string;
/** WebP version of srcSet (if applicable) */
srcSetWebp?: string;
/** Sizes attribute for responsive behavior */
sizes: string;
/** Original image URL (deprecated) */
originalImg?: string;
/** Original filename */
originalName?: string;
/** Maximum display width */
presentationWidth: number;
/** Maximum display height */
presentationHeight: number;
}Usage Examples:
# Basic fluid image
query {
file(relativePath: { eq: "hero.jpg" }) {
childImageSharp {
fluid(maxWidth: 800, quality: 90) {
...GatsbyImageSharpFluid
}
}
}
}
# Fluid image with WebP and custom breakpoints
query {
file(relativePath: { eq: "gallery.jpg" }) {
childImageSharp {
fluid(
maxWidth: 1200
srcSetBreakpoints: [400, 800, 1200, 1600]
quality: 85
) {
...GatsbyImageSharpFluid_withWebp
}
}
}
}interface Potrace {
/** Turn policy for path optimization */
turnPolicy?: PotraceTurnPolicy;
/** Suppress small components */
turdSize?: number;
/** Corner threshold */
alphaMax?: number;
/** Curve optimization */
optCurve?: boolean;
/** Curve optimization tolerance */
optTolerance?: number;
/** Threshold for color quantization */
threshold?: number;
/** Invert colors */
blackOnWhite?: boolean;
/** Foreground color */
color?: string;
/** Background color */
background?: string;
}
enum PotraceTurnPolicy {
TURNPOLICY_BLACK
TURNPOLICY_WHITE
TURNPOLICY_LEFT
TURNPOLICY_RIGHT
TURNPOLICY_MINORITY
TURNPOLICY_MAJORITY
}To migrate from legacy APIs to the modern approach:
From fixed:
# Old (deprecated)
fixed(width: 200, height: 100) {
...GatsbyImageSharpFixed
}
# New (recommended)
gatsbyImageData(
layout: FIXED
width: 200
height: 100
)From fluid:
# Old (deprecated)
fluid(maxWidth: 800) {
...GatsbyImageSharpFluid
}
# New (recommended)
gatsbyImageData(
layout: CONSTRAINED
width: 800
)