tessl/npm-gatsby-transformer-sharp

Gatsby transformer plugin for images using Sharp image processing library

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Legacy Image Processing

Name: tessl/npm-gatsby-transformer-sharp
Author: tessl

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.

Capabilities

Fixed Images (Deprecated)

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
      }
    }
  }
}

Fluid Images (Deprecated)

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
      }
    }
  }
}

Legacy Type Definitions

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
}

Migration Guide

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
)

docs

graphql-fragments.md

image-resizing-utilities.md

index.md

legacy-image-processing.md

modern-image-processing.md

tile.json

tessl/npm-gatsby-transformer-sharp