Image Transformation API

On-Demand Image Transformations

Stop pre-generating dozens of image sizes. Transform images on-demand with URL parameters. Automatic CDN caching and optimization included.

Try the API View Documentation

How URL-Based Transformations Work

Transform any image by adding parameters to the URL. No preprocessing required.

Upload Once

Upload your original high-quality image to Icefiery. Store one source image instead of dozens.

Transform with URLs

Add parameters to the image URL to resize, change format, or adjust quality on-the-fly.

Automatic Caching

Transformed images are cached globally on our CDN for lightning-fast delivery worldwide.

index.html

<!-- Original image, optimized -->
<img src="https://res.icefiery.com/res/img_8k2x9m4q7z.jpg" />

<!-- Resized and optimized -->
<img src="https://res.icefiery.com/res/img_8k2x9m4q7z.jpg?width=200&height=200" />

Common Transformation Examples

Mobile Optimization

?width=400&format=webp&quality=80

Smaller size and WebP format for mobile devices with slower connections.

Desktop Quality

?width=1200&format=webp&quality=90

Higher resolution and quality for desktop displays with faster connections.

Thumbnails

?width=150&height=150

Perfect square thumbnails for profile pictures and gallery previews.

Responsive Images Made Simple

Create responsive image sets with a few lines of code. No build tools required.

ResponsiveImage.jsx

// Responsive images made easy
const breakpoints = [320, 768, 1024, 1200];
const imageUrl = "https://res.icefiery.com/res/img_8k2x9m4q7z.jpg";

const srcSet = breakpoints
  .map((width) => `${imageUrl}?width=${width}&format=webp ${width}w`)
  .join(", ");

// Use in your component
function ResponsiveImage({ imageId, alt }) {
  const baseUrl = `https://res.icefiery.com/res/${imageId}`;
  
  return (
    <img
      src={`${baseUrl || "/placeholder.svg"}?width=800&format=webp`}
      srcSet={srcSet}
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      alt={alt}
    />
  );
}

More Transformation Examples

transformations.js

// Resize
const thumbnail = `${imageUrl}?width=150&height=150`;

// Format conversion with quality
const optimized = `${imageUrl}?format=webp&quality=85`;

// Smart resize for different devices
const mobile = `${imageUrl}?width=400&format=webp&quality=80`;
const desktop = `${imageUrl}?width=1200&format=webp&quality=90`;

// Responsive constraints (maintains aspect ratio)
const responsive = `${imageUrl}?min_width=300&max_width=800&format=webp`;
const constrainedHeight = `${imageUrl}?max_height=400&max_width=600`;

Supported Parameters

widthResize width (px)

heightResize height (px)

min_widthMinimum width (px)

max_widthMaximum width (px)

min_heightMinimum height (px)

max_heightMaximum height (px)

formatwebp, jpg, png

quality1-100

See All Transformation Options

Why URL-Based Transformations?

Simplify your image workflow and improve performance with on-demand transformations.

Reduce Storage Costs

Store one source image instead of dozens of pre-generated sizes. Save up to 90% on storage costs.

Faster Page Loads

Serve optimal image formats (WebP) and sizes automatically. Improve Core Web Vitals scores.

Responsive Design Made Simple

Create responsive image sets with URL parameters. No complex build processes required.

Start Transforming Images