Image Resizing API: Resize Images on the Fly with URL Parameters

Upload one master image. Serve it at any size, format, or quality by changing the URL. That’s the core idea behind an image resizing API.

No batch processing. No Photoshop. No build step generating 47 thumbnail variants. You append a few query parameters to the image URL and the API returns exactly what you asked for.

What Is an Image Resizing API?

An image resizing API is a service that transforms images on the fly based on instructions you pass in the request. There are two main flavors:

URL-based (query parameter) APIs are the most common for web use. You modify the image URL directly:

https://demo.sirv.com/photo.jpg?w=400&h=300&format=webp

That single URL tells the API to resize to 400x300 and convert to WebP. The transformed image is generated on the first request, cached at the edge, and served instantly for every request after that.

Code-based (REST/SDK) APIs work differently. You send an HTTP request with a payload describing the transformation, and the API returns the processed image in the response body. These are better for backend pipelines (batch processing uploads, generating thumbnails on save) but slower for real-time delivery.

For serving images on websites, URL-based APIs win on every front. They’re cacheable by CDNs, easy to implement in HTML, and don’t require server-side code. This tutorial focuses on URL-based image resizing.

Why Resize on the Fly?

You might wonder: why not just pre-generate every size you need? Three reasons.

Responsive images need many sizes. A single hero image might need variants at 320px, 480px, 640px, 768px, 1024px, 1280px, 1600px, and 2000px wide. Multiply that by two formats (WebP + JPEG fallback) and you’re looking at 16 files per image. For a product catalog with 5,000 images, that’s 80,000 files to generate, store, and sync.

Requirements change. You redesign your site and now your product thumbnails need to be 280px wide instead of 250px. With pre-generated images, you re-process every single one. With an API, you change ?w=250 to ?w=280 in your template and you’re done.

CDN caching makes it fast. The first request for a specific size triggers the transformation. Every subsequent request for that exact URL is served from cache, typically in under 25ms. In practice, you get the flexibility of on-demand processing with the speed of static files.

URL-Based Image Resizing: How It Works

The flow is straightforward:

1. You upload your original high-resolution image to the image CDN
2. In your HTML, you reference the image URL with transformation parameters appended
3. When a browser requests that URL, the CDN checks its cache
4. Cache miss: the CDN fetches the original, applies transformations, caches the result, serves it
5. Cache hit: the CDN serves the cached version directly (sub-millisecond response)

Most image resizing APIs use query parameters (?w=800&h=600), though some use URL path segments. The query parameter approach is more intuitive and easier to construct dynamically in templates.

Practical Examples with Sirv

Sirv’s dynamic imaging API uses query parameters on the image URL. Here’s a walkthrough of the most common transformations.

Basic Resizing

Resize by width (height adjusts proportionally):

<img src="https://demo.sirv.com/photo.jpg?w=800" alt="Photo resized to 800px wide">

Resize by height:

<img src="https://demo.sirv.com/photo.jpg?h=600" alt="Photo resized to 600px tall">

Fit within a bounding box (maintains aspect ratio, neither dimension exceeds the limit):

<img src="https://demo.sirv.com/photo.jpg?w=800&h=600" alt="Photo fit within 800x600">

Format Conversion

Convert to WebP for smaller file sizes (typically 25-35% smaller than JPEG at equivalent quality):

<img src="https://demo.sirv.com/photo.jpg?w=800&format=webp" alt="WebP version">

Convert to AVIF for even smaller files (up to 50% smaller than JPEG, though encoding is slower):

<img src="https://demo.sirv.com/photo.jpg?w=800&format=avif" alt="AVIF version">

Quality Control

Set JPEG/WebP quality from 1-100 (80-85 is the sweet spot for most images):

<img src="https://demo.sirv.com/photo.jpg?w=800&q=80" alt="Quality 80">

Combine with format conversion for maximum savings:

<img src="https://demo.sirv.com/photo.jpg?w=800&q=80&format=webp" alt="WebP at quality 80">

Smart Cropping

Crop to exact dimensions with face detection (great for user avatars and profile photos):

<img src="https://demo.sirv.com/photo.jpg?w=400&h=400&crop.type=face" alt="Face-cropped square">

Watermarks and Text Overlays

Add a watermark from another image in your Sirv account:

<img src="https://demo.sirv.com/photo.jpg?watermark=/watermarks/logo.png" alt="Watermarked photo">

Add text directly onto the image:

<img src="https://demo.sirv.com/photo.jpg?text=Sample%20Image" alt="Photo with text overlay">

Effects

Apply a Gaussian blur (useful for placeholder images or background effects):

<img src="https://demo.sirv.com/photo.jpg?w=800&blur=10" alt="Blurred photo">

Convert to grayscale:

<img src="https://demo.sirv.com/photo.jpg?w=800&grayscale=true" alt="Grayscale photo">

Saved Profiles

If you find yourself repeating the same parameter combinations, Sirv lets you save them as a named profile. Instead of writing out every parameter, you reference the profile:

<img src="https://demo.sirv.com/photo.jpg?profile=thumbnail" alt="Thumbnail using saved profile">

That thumbnail profile might expand to ?w=300&h=300&crop.type=face&q=80&format=webp behind the scenes.

Building Responsive Images with Dynamic Resizing

An image resizing API makes srcset implementation trivial. Instead of generating and hosting multiple files, you generate multiple URLs:

<img
  src="https://demo.sirv.com/photo.jpg?w=800&q=80&format=webp"
  srcset="
    https://demo.sirv.com/photo.jpg?w=400&q=80&format=webp 400w,
    https://demo.sirv.com/photo.jpg?w=600&q=80&format=webp 600w,
    https://demo.sirv.com/photo.jpg?w=800&q=80&format=webp 800w,
    https://demo.sirv.com/photo.jpg?w=1200&q=80&format=webp 1200w,
    https://demo.sirv.com/photo.jpg?w=1600&q=80&format=webp 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Responsive photo"
  width="800"
  height="600"
  loading="lazy"
>

Same source image. Five sizes. The browser picks the best one for the viewport and screen density. Your LCP score gets a nice boost because mobile users aren’t downloading a 1600px image for a 375px screen.

You can automate this in any templating language. Here’s a quick helper in JavaScript:

function responsiveImage(src, widths, options = {}) {
  const { quality = 80, format = 'webp' } = options;
  const params = `q=${quality}&format=${format}`;

  const srcset = widths
    .map(w => `${src}?w=${w}&${params} ${w}w`)
    .join(', ');

  return {
    src: `${src}?w=${widths[widths.length - 1]}&${params}`,
    srcset,
  };
}

const hero = responsiveImage(
  'https://demo.sirv.com/hero.jpg',
  [400, 600, 800, 1200, 1600]
);
// hero.src = "https://demo.sirv.com/hero.jpg?w=1600&q=80&format=webp"
// hero.srcset = "https://demo.sirv.com/hero.jpg?w=400&q=80&format=webp 400w, ..."

Common Image Transformation Patterns

Here are the patterns that show up in almost every project.

Thumbnail Grid

E-commerce product listings, image galleries, blog post cards. Fixed dimensions, face-aware crop:

https://demo.sirv.com/product.jpg?w=300&h=300&crop.type=face&q=80&format=webp

Hero / Banner Image

Full-width images that scale with the viewport. Use srcset with multiple widths, quality around 80:

https://demo.sirv.com/hero.jpg?w=1600&q=80&format=webp

Social Media OG Images

Open Graph images need specific dimensions. Facebook recommends 1200x630:

https://demo.sirv.com/og-base.jpg?w=1200&h=630&text=Your%20Article%20Title

Low-Quality Image Placeholders (LQIP)

Serve a tiny, blurred version for instant placeholder display while the full image loads:

https://demo.sirv.com/photo.jpg?w=40&q=30&blur=5

That URL returns a roughly 1-2 KB image you can inline as a base64 data URI or load first for a smooth transition.

Product Zoom

For e-commerce detail pages where users want to inspect texture and quality:

https://demo.sirv.com/product-detail.jpg?w=2000&q=90

Sirv also offers a dedicated deep zoom viewer that tiles images at multiple zoom levels, which works better for very large images (50+ megapixels).

Alternative Image Resizing APIs Compared

Sirv isn’t the only option. Here’s how the major players compare.

Cloudinary

The biggest name in image processing APIs. Cloudinary uses URL path segments instead of query parameters:

https://res.cloudinary.com/demo/image/upload/w_400,h_300,c_fill,f_auto,q_auto/sample.jpg

Key differences from Sirv:

• Transformations go in the URL path, not query string
• Uses c_fill, c_fit, c_crop for crop modes
• f_auto and q_auto let Cloudinary choose the optimal format and quality
• More AI features (background removal, object detection, generative fill)
• Credit-based pricing starting at $89/month (Plus plan, 225 credits). Free tier available with 25 credits.

Cloudinary’s AI capabilities are genuinely ahead of the pack. If you need background removal or content-aware cropping beyond face detection, Cloudinary is the stronger choice. But the pricing adds up quickly for high-volume sites.

imgix

imgix focuses purely on image processing and CDN delivery. URL syntax uses query parameters like Sirv:

https://your-source.imgix.net/photo.jpg?w=400&h=300&fit=crop&fm=webp&q=75

Key differences:

• Query parameter syntax similar to Sirv
• fit=crop, fit=max, fit=fill for resize modes
• fm=webp for format, auto=format for automatic format selection
• Pricing based on source image count, starting around $62.50/month (Basic plan)
• Strong focus on performance and developer experience

imgix has excellent documentation and client libraries. The image-count pricing model can be more predictable than transformation-based billing if you serve many variants of fewer source images.

Cloudflare Images

Cloudflare’s offering integrates with their CDN (300+ edge locations, far more than any dedicated image CDN). Transformation syntax uses a special path prefix:

https://yoursite.com/cdn-cgi/image/width=400,height=300,format=auto,quality=80/path/to/image.jpg

Key differences:

• Runs at the Cloudflare edge, not a separate service
• Comma-separated parameters in a /cdn-cgi/image/ path
• First 5,000 unique transformations per month are free
• Beyond that, $0.50 per 1,000 unique transformations
• Each unique transformation is billed only once per month, regardless of how many times it’s served
• Requires a Cloudflare plan (works with the free tier)

Cloudflare’s pricing model is probably the cheapest at scale. You pay per unique transformation, not per request or per image served. If you already use Cloudflare for DNS/CDN, adding image transformations is a natural extension.

Thumbor (Open Source, Self-Hosted)

Thumbor is the go-to option if you want to run your own image resizing service. It’s open source (MIT license), written in Python, and used by Wikipedia and Amazon’s Serverless Image Handler.

URL syntax uses path segments:

http://your-thumbor-server/unsafe/400x300/smart/path/to/image.jpg

Key differences:

• Self-hosted, so no per-image or per-transformation fees
• smart flag enables face and feature detection for cropping
• Supports filters: /filters:blur(10):grayscale()/
• You manage the infrastructure (servers, caching, scaling)
• Current version: 7.7.7

Thumbor is free, but “free” doesn’t include the server costs, ops overhead, and time spent configuring caching layers. For small-to-medium sites, a managed service like Sirv or Cloudflare Images will almost certainly be cheaper when you factor in engineering time. For large-scale operations with a platform team, Thumbor gives you full control.

Quick Comparison

Feature	Sirv	Cloudinary	imgix	Cloudflare Images	Thumbor
URL syntax	Query params	Path segments	Query params	Path prefix	Path segments
Auto WebP/AVIF	Yes	Yes	Yes	Yes	Yes (config needed)
Face detection crop	Yes	Yes	Yes	No	Yes
AI features	No	Yes (extensive)	Limited	No	No
CDN edge locations	24	60+	60+	300+	Self-managed
Free tier	500 MB / 2 GB	25 credits	Limited	5,000 transforms	Open source
Paid starting price	$19/mo	$89/mo	$62.50/mo	$0.50/1K transforms	Server costs
360/3D/Zoom viewers	Yes	No	No	No	No

Performance Tips

A few things to keep in mind when using any image resizing API.

Always specify dimensions in your HTML. Even with dynamic resizing, include width and height attributes on your <img> tags. This prevents Cumulative Layout Shift (CLS) because the browser can reserve the correct space before the image loads.

<img
  src="https://demo.sirv.com/photo.jpg?w=800&h=600&format=webp"
  width="800"
  height="600"
  alt="Photo with explicit dimensions"
  loading="lazy"
>

Use lazy loading for below-the-fold images. Add loading="lazy" to images that aren’t visible on initial page load. Don’t lazy-load your LCP image though, as that will hurt your largest contentful paint score.

Pick a quality between 75 and 85. Below 75, compression artifacts become visible on most images. Above 85, file size increases significantly with barely perceptible quality improvement. For thumbnails, you can go as low as 60-70 since the small display size hides artifacts.

Prefer WebP over JPEG. WebP delivers 25-35% smaller files at equivalent visual quality. AVIF is even smaller (up to 50% savings), but encoding is slower and browser support, while growing, isn’t quite universal yet. Most image APIs support automatic format selection (format=webp or the equivalent), so the API handles browser compatibility for you.

Cache headers matter. Verify that your image API sets long Cache-Control headers (ideally max-age=31536000 for a year). This ensures browsers and intermediate caches store the transformed images and don’t re-request them on every page load. Sirv and most managed services handle this automatically.

Getting Started

If you want to try URL-based image resizing right now, the fastest path is:

1. Sign up for Sirv (free plan: 500 MB storage, 2 GB transfer)
2. Upload an image through the dashboard
3. Append ?w=400&format=webp to the image URL
4. Open that URL in your browser

You’ll see the resized, WebP-converted image served from Sirv’s CDN. From there, build out your srcset attributes, experiment with cropping and effects, and integrate the URLs into your templates.

For larger teams already on Cloudflare, their Images product is worth evaluating for the pricing model alone. And if you need advanced AI transformations (background removal, generative fill), Cloudinary is the clear leader in that space.

The right choice depends on your scale, budget, and feature needs. But the concept is the same everywhere: one source image, infinite variations, zero manual processing.