Snapkit Logo

Use Cases#

Explore real-world scenarios and learn how to apply image transformations effectively.

Website Hero Images#

Requirements#

  • High-resolution for desktop displays
  • Responsive sizing
  • Fast loading with modern formats

Solution#

?transform=w:1920,h:1080,dpr:2.0,format:auto,fit:cover

Result:

  • Actual size: 3840x2160 (with DPR 2.0)
  • Format: AVIF/WebP (browser-dependent)
  • Crisp display on Retina screens

Thumbnail Generation#

Requirements#

  • Square aspect ratio (1:1)
  • Small file size for fast loading
  • Consistent dimensions across grid

Solution#

?transform=w:200,h:200,fit:cover,dpr:2.0,format:webp

Result:

  • Perfect squares for grid layout
  • Actual size: 400x400 (with DPR 2.0)
  • WebP format for size optimization

Product Images#

Requirements#

  • Maintain aspect ratio
  • Show entire product
  • Consistent background

Solution#

?transform=w:600,h:600,fit:contain,format:auto

Use case:

  • E-commerce product listings
  • Consistent sizing across catalog
  • No cropping of products

Blog Post Featured Images#

Requirements#

  • Specific aspect ratio (16:9)
  • Optimized for web
  • Responsive

Solution#

Desktop: ?transform=w:1200,h:675,fit:cover,format:webp,quality:85

Mobile: ?transform=w:600,h:338,fit:cover,format:webp,quality:85

Profile Pictures#

Requirements#

  • Circular display (1:1)
  • High quality for various sizes
  • Consistent across platform

Solution#

Standard: ?transform=w:128,h:128,fit:cover,dpr:2.0

Large: ?transform=w:256,h:256,fit:cover,dpr:2.0

Social Media Sharing#

Requirements#

  • OG image dimensions (1200x630)
  • Optimized file size
  • Fast delivery

Solution#

?transform=w:1200,h:630,fit:cover,format:jpeg,quality:85

Platforms:

  • Facebook, Twitter, LinkedIn
  • WhatsApp, Slack previews

Gallery / Portfolio#

Requirements#

  • Artistic effects
  • Consistent styling
  • Various sizes

Solutions#

Black & white artistic: ?transform=w:800,grayscale,format:webp

Blur background: ?transform=w:400,h:300,blur:5,format:webp

Rotated artistic: ?transform=w:600,rotation:15,format:webp

Mobile App Assets#

Requirements#

  • Multiple resolutions (1x, 2x, 3x)
  • Optimized for bandwidth
  • Fast loading

Solutions#

1x (standard): ?transform=w:375,dpr:1.0,format:webp

2x (Retina): ?transform=w:375,dpr:2.0,format:webp

3x (high-end): ?transform=w:375,dpr:3.0,format:webp

Background Images#

Requirements#

  • Blur for text overlay
  • Large size
  • Optimized quality

Solution#

?transform=w:1920,h:1080,blur:10,format:webp,quality:80

Use cases:

  • Hero sections with text
  • Card backgrounds
  • Landing pages

Email Newsletter Images#

Requirements#

  • Specific dimensions for email clients
  • Good quality at small size
  • Reliable format support

Solution#

?transform=w:600,h:400,fit:cover,format:jpeg,quality:85

Why JPEG:

  • Universal email client support
  • Predictable rendering
  • Smaller file size than PNG

Animated GIF Optimization#

Requirements#

  • Reduce file size
  • Maintain quality
  • Faster loading

Solution#

?transform=format:animated-webp,fps:24,quality:85

Benefits:

  • 60% smaller file size
  • Better quality
  • Smooth playback

Learn more about Animation →

Download/Export Functionality#

Requirements#

  • User-controlled filename
  • Transformed image download
  • Format conversion

Solution#

?transform=w:1920,h:1080,format:jpeg,quality:95,dl:high-res-export

Use cases:

  • Export edited images
  • Download optimized versions
  • Save transformed copies

Learn more about Download Control →

Responsive Image Implementation#

Complete Example#

<picture>
  <!-- Desktop -->
  <source
    media="(min-width: 1024px)"
    srcset="
      https://cdn.snapkit.studio/org/image.jpg?transform=w:1200,dpr:1.0,format:auto 1x,
      https://cdn.snapkit.studio/org/image.jpg?transform=w:1200,dpr:2.0,format:auto 2x
    "
  />
 
  <!-- Tablet -->
  <source
    media="(min-width: 768px)"
    srcset="
      https://cdn.snapkit.studio/org/image.jpg?transform=w:800,dpr:1.0,format:auto 1x,
      https://cdn.snapkit.studio/org/image.jpg?transform=w:800,dpr:2.0,format:auto 2x
    "
  />
 
  <!-- Mobile -->
  <img
    src="https://cdn.snapkit.studio/org/image.jpg?transform=w:375,dpr:2.0,format:auto"
    srcset="
      https://cdn.snapkit.studio/org/image.jpg?transform=w:375,dpr:2.0,format:auto 2x,
      https://cdn.snapkit.studio/org/image.jpg?transform=w:375,dpr:3.0,format:auto 3x
    "
    alt="Responsive image"
  />
</picture>

Region Extraction Use Cases#

Extract Center 50%#

?transform=extract:25-25-50-50,w:400

Use case: Focus on main subject

Extract Left Half#

?transform=extract:0-0-50-100,w:400

Use case: Side-by-side comparisons

Extract Custom Region#

?transform=extract:100-100-400-300,w:400

Use case: Specific area of interest

Next Steps#