Image Transform API#

Use Snapkit's Image Transform API to perform real-time image transformations via URL parameters. Built on the Sharp↗ library for high-performance processing and CloudFront CDN, it provides fast image delivery worldwide.

Quick Start#

Basic Usage#

Add query parameters to uploaded image URLs for real-time transformation:

GET https://{organization}-cdn.snapkit.studio
  /{project}
  /{path}
  /{filename}
  ?transform=w:800,h:600,fit:cover,flip,grayscale,dpr:2

URL Components:

{organization}: Organization name (e.g., acme-corp)
{project}: Project name
{path}: Folder path
{filename}: Image filename
Query parameters: Transform options (w, h, fit, etc.)

Key Features#

Real-time transformation: Instant image transformation via URL parameters
CDN caching: Fast image delivery from CloudFront after first transformation
Automatic optimization: Automatic format selection based on browser capabilities
High-resolution support: Responsive image generation based on DPR (Device Pixel Ratio)

Transform Parameters#

Size & Layout#

Control image dimensions and layout with these parameters:

Parameter	Type	Description
`w`	number	Width in pixels (1-16384)
`h`	number	Height in pixels (1-16384)
`fit`	string	Fit mode: `contain`, `cover`, `fill`, `inside`, `outside`
`dpr`	number	Device Pixel Ratio (1.0-4.0)

Learn more about Size & Layout →

Visual Effects#

Apply visual effects to your images:

Parameter	Type	Description
`rotation`	number	Rotation angle (-360 to 360 degrees)
`blur`	number	Blur intensity (0-20)
`grayscale`	boolean	Convert to grayscale
`flip`	boolean	Vertical flip
`flop`	boolean	Horizontal flip

Learn more about Visual Effects →

Region & Output#

Extract specific regions and control output format:

Parameter	Type	Description
`extract`	string	Extract region: `x-y-width-height` format
`format`	string	Output format: `jpeg`, `png`, `webp`, `avif`, `auto`, etc.
`quality`	number	Image quality (1-100)

Learn more about Region & Output →

Animation#

Optimize animated images:

Parameter	Type	Description
`fps`	number	Frame rate (1-60, animated-webp only)
`frameRange`	string	Frame range: `start-end` (animated-webp only)

Learn more about Animation →

Download Control#

Control how images are downloaded:

Parameter	Type	Description
`dl`	string	Download control: `dl` or `dl:custom-name`

Learn more about Download Control →

Quick Examples#

Basic Resize#

?transform=w:800,h:600,fit:cover

High-Resolution for Retina Displays#

?transform=w:800,dpr:2.0,format:auto

Thumbnail with Effects#

?transform=w:200,h:200,fit:cover,grayscale,blur:2

Optimized for Mobile#

?transform=w:375,dpr:3,format:auto,fit:cover

Transform Processing Order#

Transformations are applied in this specific order:

Extract - Region extraction
Resize - Size adjustment (with DPR)
Rotation - Image rotation
Flip/Flop - Flipping transformations
Blur - Blur effect
Grayscale - Grayscale conversion
Format - Format conversion

Performance & Caching#

CloudFront CDN#

First request: Transform and cache
Subsequent requests: Instant delivery from cache
Cache duration: 1 year

Format Auto-Selection#

When using format:auto, the optimal format is automatically selected based on browser capabilities:

AVIF-supporting browsers: AVIF format
WebP-supporting browsers: WebP format
Standard browsers: JPEG/PNG format

Next Steps#

Size & Layout - Master image dimensions and layout control
Visual Effects - Add creative effects to your images
Best Practices - Learn optimization strategies
Use Cases - See real-world examples
Limitations - Understand system limits and error handling