Simple image resizing and original image access utilities for basic transformations and static image serving scenarios.
Provides simple image resizing functionality with format conversion and basic optimization settings.
/**
* Resize image with optional format conversion
* Available as a GraphQL field on ImageSharp nodes
*/
resize(
/** Target width in pixels */
width?: Int,
/** Target height in pixels */
height?: Int,
/** Overall quality (1-100) */
quality?: Int,
/** JPG quality (1-100) */
jpegQuality?: Int,
/** PNG quality (1-100) */
pngQuality?: Int,
/** WebP quality (1-100) */
webpQuality?: Int,
/** Enable progressive JPG (default: true) */
jpegProgressive?: Boolean,
/** PNG compression level (1-9, default: 9) */
pngCompressionLevel?: Int,
/** PNG compression speed (1-10, default: 4) */
pngCompressionSpeed?: Int,
/** Convert to grayscale (default: false) */
grayscale?: Boolean,
/** Apply duotone effect */
duotone?: DuotoneGradient,
/** Generate base64 instead of file (default: false) */
base64?: Boolean,
/** Traced SVG options (deprecated, falls back to base64) */
traceSVG?: Potrace,
/** Output format conversion */
toFormat?: 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: 0) */
trim?: Float
): ImageSharpResize;
interface ImageSharpResize {
/** Resized image source URL */
src?: string;
/** Deprecated traced SVG placeholder (returns base64) */
tracedSVG?: string;
/** Resized width in pixels */
width?: number;
/** Resized height in pixels */
height?: number;
/** Aspect ratio (width/height) */
aspectRatio?: number;
/** Original filename */
originalName?: string;
}Usage Examples:
# Simple resize
query {
file(relativePath: { eq: "large-image.jpg" }) {
childImageSharp {
resize(width: 400, height: 300) {
src
width
height
}
}
}
}
# Resize with format conversion and quality
query {
file(relativePath: { eq: "photo.png" }) {
childImageSharp {
resize(
width: 800
toFormat: JPG
jpegQuality: 85
jpegProgressive: true
) {
src
width
height
originalName
}
}
}
}
# Generate base64 thumbnail
query {
file(relativePath: { eq: "preview.jpg" }) {
childImageSharp {
resize(width: 64, height: 64, base64: true) {
src
}
}
}
}Provides access to original image metadata and creates a static copy for direct serving.
/**
* Access original image metadata and static copy
* Available as a GraphQL field on ImageSharp nodes
*/
original(): ImageSharpOriginal;
interface ImageSharpOriginal {
/** Original image width in pixels */
width?: number;
/** Original image height in pixels */
height?: number;
/** Static copy URL for direct serving */
src?: string;
}Usage Examples:
# Get original image dimensions and static URL
query {
file(relativePath: { eq: "document.pdf" }) {
childImageSharp {
original {
width
height
src
}
}
}
}
# Use for image metadata without processing
query {
allFile(filter: { extension: { eq: "jpg" } }) {
edges {
node {
name
childImageSharp {
original {
width
height
}
}
}
}
}
}Convert images between supported formats during resize:
# PNG to WebP conversion
query {
file(relativePath: { eq: "logo.png" }) {
childImageSharp {
resize(width: 200, toFormat: WEBP, webpQuality: 90) {
src
}
}
}
}
# JPG to AVIF conversion
query {
file(relativePath: { eq: "photo.jpg" }) {
childImageSharp {
resize(width: 600, toFormat: AVIF, quality: 85) {
src
}
}
}
}Apply visual effects during resize:
# Grayscale conversion
query {
file(relativePath: { eq: "color-photo.jpg" }) {
childImageSharp {
resize(width: 400, grayscale: true) {
src
}
}
}
}
# Duotone effect
query {
file(relativePath: { eq: "portrait.jpg" }) {
childImageSharp {
resize(
width: 300
duotone: { highlight: "#0066cc", shadow: "#000033" }
) {
src
}
}
}
}
# Rotation and trimming
query {
file(relativePath: { eq: "rotated.jpg" }) {
childImageSharp {
resize(width: 500, rotate: 90, trim: 2.5) {
src
width
height
}
}
}
}Control how images are cropped and fitted during resize:
# Focus on specific area when cropping
query {
file(relativePath: { eq: "group-photo.jpg" }) {
childImageSharp {
resize(
width: 300
height: 200
cropFocus: NORTH
fit: COVER
) {
src
}
}
}
}
# Contain image within dimensions
query {
file(relativePath: { eq: "wide-image.jpg" }) {
childImageSharp {
resize(
width: 400
height: 300
fit: CONTAIN
background: "#ffffff"
) {
src
}
}
}
}