**Status**: Production Ready ✅ | **Version**: 3.0.0 | **Last Verified**: 2025-12-27
Upload, store, and transform images globally using Cloudflare's CDN with automatic WebP/AVIF conversion. Use this when you need to handle user uploads, optimize images for performance, or serve responsive images from a global network.
/plugin marketplace add secondsky/claude-skills/plugin install cloudflare-images@claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/diagrams/direct-upload-workflow.mdassets/diagrams/transformation-pipeline.mdassets/diagrams/variants-structure.mdexamples/basic-upload/README.mdexamples/basic-upload/package.jsonexamples/basic-upload/public/index.htmlexamples/basic-upload/src/index.tsexamples/basic-upload/wrangler.jsoncexamples/private-images/README.mdexamples/private-images/package.jsonexamples/private-images/public/index.htmlexamples/private-images/src/index.tsexamples/private-images/wrangler.jsoncexamples/responsive-gallery/README.mdreferences/api-reference.mdreferences/content-credentials.mdreferences/custom-domains.mdreferences/direct-upload-complete-workflow.mdreferences/format-optimization.mdreferences/framework-integration.mdStatus: Production Ready ✅ | Version: 3.0.0 | Last Verified: 2025-12-27
Two powerful features:
Key benefits:
Dashboard → Images → Enable
Get your Account ID and create API token (Cloudflare Images: Edit permission)
curl --request POST \
--url https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1 \
--header 'Authorization: Bearer <API_TOKEN>' \
--header 'Content-Type: multipart/form-data' \
--form 'file=@./image.jpg'
CRITICAL: Use multipart/form-data, not JSON
<img src="https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/public" />
Dashboard → Images → Transformations → Enable for zone
Transform ANY image:
<img src="/cdn-cgi/image/width=800,quality=85/uploads/photo.jpg" />
export default {
async fetch(request: Request): Promise<Response> {
return fetch("https://example.com/image.jpg", {
cf: {
image: {
width: 800,
quality: 85,
format: "auto" // WebP/AVIF
}
}
});
}
};
Load references/setup-guide.md for complete walkthrough.
Upload methods:
Load templates/upload-api-basic.ts for file upload example.
Load references/direct-upload-complete-workflow.md for user uploads.
Optimize ANY image (uploaded or external).
Methods:
/cdn-cgi/image/width=800,quality=85/path/to/image.jpgcf.image fetch optionLoad references/transformation-options.md for all options.
Load templates/transform-via-workers.ts for Workers example.
Predefined transformations (up to 100).
Examples:
thumbnail: 200x200, fit=coverhero: 1920x1080, quality=90mobile: 640, quality=75Load references/variants-guide.md for complete guide.
/cdn-cgi/image/Direct creator upload pattern for user-uploaded images:
// Backend: Generate upload URL
const response = await fetch(
`https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/images/v2/direct_upload`,
{ method: 'POST', headers: { 'Authorization': `Bearer ${API_TOKEN}` } }
);
const { result } = await response.json();
return Response.json({ uploadURL: result.uploadURL });
// Frontend: Upload file
const formData = new FormData();
formData.append('file', file);
await fetch(uploadURL, { method: 'POST', body: formData });
Load templates/direct-creator-upload-backend.ts for complete example.
See examples/basic-upload/ for complete working project.
Responsive images with srcset for optimal performance:
<img
srcset="
https://imagedelivery.net/abc/xyz/width=400 400w,
https://imagedelivery.net/abc/xyz/width=800 800w,
https://imagedelivery.net/abc/xyz/width=1200 1200w
"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
src="https://imagedelivery.net/abc/xyz/width=800"
/>
Load templates/responsive-images-srcset.html for complete example.
See examples/responsive-gallery/ for complete working project.
Additional Use Cases:
references/transformation-options.mdreferences/signed-urls-guide.md or see examples/private-images/templates/batch-upload.tsreferences/framework-integration.md for Next.js, Remix, Astroreferences/overlays-watermarks.md and templates/overlay-watermark.tsreferences/custom-domains.mdreferences/webhooks-guide.md and templates/webhook-handler.tsProblem: Browser blocks direct upload from your domain.
Solution: Configure CORS headers when generating upload URL:
const response = await fetch(
`https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/images/v2/direct_upload`,
{
method: 'POST',
headers: { 'Authorization': `Bearer ${API_TOKEN}` },
body: JSON.stringify({
requireSignedURLs: false,
metadata: { source: 'user-upload' }
})
}
);
Problem: JSON encoding fails for file uploads (must use multipart/form-data).
Solution:
// ✅ CORRECT
const formData = new FormData();
formData.append('file', file);
await fetch(uploadURL, { method: 'POST', body: formData });
// ❌ WRONG
const json = JSON.stringify({ file: base64File });
Additional Common Errors:
references/top-errors.mdreferences/top-errors.mdreferences/top-errors.mdreferences/top-errors.mdreferences/signed-urls-guide.mdLoad references/top-errors.md for all 10 errors with complete solutions.
Load references/setup-guide.md when:
Load references/api-reference.md when:
Load references/top-errors.md when:
Load references/direct-upload-complete-workflow.md when:
Load references/signed-urls-guide.md when:
Load references/webhooks-guide.md when:
Load references/transformation-options.md when:
Load references/format-optimization.md when:
Load references/polish-compression.md when:
Load references/overlays-watermarks.md when:
Load references/variants-guide.md when:
Load references/responsive-images-patterns.md when:
Load references/framework-integration.md when:
Load references/custom-domains.md when:
Load references/content-credentials.md when:
Load references/sourcing-kit.md when:
Core: setup-guide.md, api-reference.md, top-errors.md
Upload: direct-upload-complete-workflow.md, signed-urls-guide.md, webhooks-guide.md
Transform: transformation-options.md, format-optimization.md, polish-compression.md, overlays-watermarks.md
Advanced: variants-guide.md, responsive-images-patterns.md, framework-integration.md, custom-domains.md, content-credentials.md, sourcing-kit.md
Upload: upload-api-basic.ts, upload-via-url.ts, direct-creator-upload-backend.ts, direct-creator-upload-frontend.html, batch-upload.ts
Transform: transform-via-url.ts, transform-via-workers.ts, overlay-watermark.ts
Variants: variants-management.ts, signed-urls-generation.ts, responsive-images-srcset.html
Integration: nextjs-integration.tsx, remix-integration.tsx, webhook-handler.ts
Config: wrangler-images-binding.jsonc, package.json
Use: /agent <agent-name> or let Claude auto-detect when relevant
Use: /<command-name>
Clone and run: cd examples/<example-name> && npm install && npm run dev
View in: assets/diagrams/
Run: ./scripts/<script-name>.sh (requires CF_ACCOUNT_ID and CF_API_TOKEN in .env)
Images API: $5/100k stored, $1/100k delivered Transformations: $0.50/1k (100k/month free per zone) Direct Upload: Included in API pricing
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.