Image Resizer

Fetch and resize remote images using Cloudflare Image Resizing via the fetch API and cf.image options. Returns the resized image binary with the appropriate Content-Type header.

API ReferenceCopy Anchor Link

GET /resizeCopy Anchor Link

Fetches a remote image and returns a resized version.

Example RequestCopy Anchor Link

curl "https://your-worker.workers.dev/resize?url=https://example.com/image.jpg&width=800&fit=scale-down" --output resized.jpg

Success ResponseCopy Anchor Link

Returns the resized image as binary data with an appropriate Content-Type header (e.g. image/jpeg, image/png).

Error ResponseCopy Anchor Link

{
  "error": "Missing or invalid query parameter: url",
  "code": "INVALID_URL"
}

Error CodesCopy Anchor Link

• 400 - Missing or invalid url (INVALID_URL)
• 400 - Invalid width value (INVALID_WIDTH)
• 400 - Invalid height value (INVALID_HEIGHT)
• 400 - Neither width nor height provided (MISSING_DIMENSION)
• 400 - Invalid fit mode (INVALID_FIT)
• 502 - Upstream fetch or resize failed (FETCH_ERROR)

Use CasesCopy Anchor Link

• Serve dynamically resized thumbnails from any remote image URL
• Learn Cloudflare Image Resizing options via Workers fetch
• Build on-the-fly image proxy endpoints at the edge
• Reduce bandwidth by resizing images before delivery to clients

LimitationsCopy Anchor Link

• Remote image fetch is subject to a timeout
• Resizing options are limited to the query params exposed by this experiment
• Origin must allow Cloudflare to fetch the image URL
• Single image per request; no batch processing

Use in your projectCopy Anchor Link

import { DEFAULT_FIT, MAX_DIMENSION, VALID_FITS, type ImageFit } from "../constants/defaults";export function parseDimension(input: string | undefined): number | null {  if (input === undefined) return null;  if (typeof input !== "string") return null;  const trimmed = input.trim();  if (!trimmed) return null;  const value = Number(trimmed);  if (!Number.isInteger(value) || value <= 0 || value > MAX_DIMENSION) return null;  return value;}export function normalizeFit(input: string | undefined): ImageFit | null {  const raw = (input ?? DEFAULT_FIT).trim().toLowerCase();  if (VALID_FITS.includes(raw as ImageFit)) {    return raw as ImageFit;  }  return null;}export function buildImageOptions(  width: number | null,  height: number | null,  fit: ImageFit): NonNullable<RequestInitCfProperties["image"]> {  const options: NonNullable<RequestInitCfProperties["image"]> = { fit };  if (width !== null) options.width = width;  if (height !== null) options.height = height;  return options;}

DeploymentCopy Anchor Link

curl "https://your-worker.workers.dev/resize?url=https://example.com/image.jpg&width=800&fit=scale-down" --output resized.jpg

Local DevelopmentCopy Anchor Link

cd apps/experiments/image-resizer
npm install
npm run dev

Test locally:

curl "http://localhost:8787/resize?url=https://example.com/image.jpg&width=800&fit=scale-down" --output resized.jpg

Cloudflare Features UsedCopy Anchor Link

• Workers - Edge compute runtime
• Image Resizing - fetch with cf.image transform options
• Fetch API - Remote image retrieval