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

Image Resizing and Utilities

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

Simple image resizing and original image access utilities for basic transformations and static image serving scenarios.

Capabilities

Resize Images

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

Original Image Access

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

Advanced Resize Options

Format Conversion

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

Image Effects

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

Crop and Fit Options

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