cloudflare-images

Name: cloudflare-images
Author: jackspace

15stars7forks

How to install cloudflare-images?

jackspace/claudeskillz/cloudflare-images

$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-images

Installs into the current project.

Summary

This skill provides comprehensive knowledge for Cloudflare Images, covering both the Images API (upload/storage) and Image Transformations (optimize any image). It should be used when uploading images to Cloudflare, resizing images, optimizing image delivery, implementing direct

Files · 1

View on GitHub

SKILL.md

1	# Cloudflare Images
2
3	Status: Production Ready ✅
4	Last Updated: 2025-10-26
5	Dependencies: Cloudflare account with Images enabled
6	Latest Versions: Cloudflare Images API v2
7
8	---
9
10	## Overview
11
12	Cloudflare Images provides two powerful features:
13
14	1. Images API: Upload, store, and serve images with automatic optimization and variants
15	2. Image Transformations: Resize, optimize, and transform any publicly accessible image
16
17	Key Benefits:
18	- Global CDN delivery
19	- Automatic WebP/AVIF conversion
20	- Variants for different use cases (up to 100)
21	- Direct creator upload (user uploads without API keys)
22	- Signed URLs for private images
23	- Transform any image via URL or Workers
24
25	---
26
27	## Quick Start (5 Minutes)
28
29	### 1. Enable Cloudflare Images
30
31	Log into Cloudflare dashboard → Images → Enable for your account.
32
33	Get your Account ID and create an API token with Cloudflare Images: Edit permissions.
34
35	Why this matters:
36	- Account ID and API token are required for all API operations
37	- Images Free plan includes limited transformations
38
39	### 2. Upload Your First Image
40
41	```bash
42	curl --request POST \
43	--url https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1 \
44	--header 'Authorization: Bearer <API_TOKEN>' \
45	--header 'Content-Type: multipart/form-data' \
46	--form 'file=@./image.jpg'
47	```
48
49	Response includes:
50	- `id`: Image ID for serving
51	- `variants`: Array of delivery URLs
52
53	CRITICAL:
54	- Use `multipart/form-data` encoding (NOT `application/json`)
55	- Image ID is automatically generated (or use custom ID)
56
57	### 3. Serve the Image
58
59	```html
60	<img src="https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/public" />
61	```
62
63	Default `public` variant serves the image. Replace with your own variant names.
64
65	### 4. Enable Image Transformations
66
67	Dashboard → Images → Transformations → Select your zone → Enable for zone
68
69	Now you can transform ANY image:
70
71	```html
72	<img src="/cdn-cgi/image/width=800,quality=85/uploads/photo.jpg" />
73	```
74
75	Why this matters:
76	- Works on images stored OUTSIDE Cloudflare Images
77	- Automatic caching on Cloudflare's global network
78	- No additional storage costs
79
80	### 5. Transform via Workers (Advanced)
81
82	```typescript
83	export default {
84	async fetch(request: Request): Promise<Response> {
85	const imageURL = "https://example.com/image.jpg";
86
87	return fetch(imageURL, {
88	cf: {
89	image: {
90	width: 800,
91	quality: 85,
92	format: "auto" // WebP/AVIF for supporting browsers
93	}
94	}
95	});
96	}
97	};
98	```
99
100	---
101
102	## The 3-Feature System
103
104	### Feature 1: Images API (Upload & Storage)
105
106	Store images on Cloudflare's network and serve them globally.
107
108	Upload Methods:
109	1. File Upload - Upload files directly from your server
110	2. Upload via URL - Ingest images from external URLs
111	3. Direct Creator Upload - Generate one-time upload URLs for user uploads
112
113	Serving Options:
114	- Default domain: `imagedelivery.net`
115	- Custom domains: `/cdn-cgi/imagedelivery/...`
116	- Signed URLs: Private images with expiry tokens
117
118	See: `templates/upload-api-basic.ts`, `templates/direct-creator-upload-backend.ts`
119
120	### Feature 2: Image Transformations
121
122	Optimize and resize ANY image (stored in Images or external).
123
124	Two Methods:
125	1. URL Transformations - Special URL format
126	2. Workers Transformations - Programmatic control via fetch
127
128	Common Transformations:
129	- Resize: `width=800,height=600,fit=cover`
130	- Optimize: `quality=85,format=auto`
131	- Effects: `blur=10,sharpen=3`
132	- Crop: `gravity=face,zoom=0.5`
133
134	See: `templates/transform-via-url.ts`, `templates/transform-via-workers.ts`
135
136	### Feature 3: Variants
137
138	Predefined image sizes for different use cases.
139
140	Named Variants (up to 100):
141	- Create once, use everywhere
142	- Example: `t

People who liked this also viewed

6 picks

Type

cloudflare-images

15stars7forks

View on GitHub

How to install cloudflare-images?

jackspace/claudeskillz/cloudflare-images

$npx -y skills add jackspace/ClaudeSkillz --skill cloudflare-images

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Cloudflare Images
2
3	Status: Production Ready ✅
4	Last Updated: 2025-10-26
5	Dependencies: Cloudflare account with Images enabled
6	Latest Versions: Cloudflare Images API v2
7
8	---
9
10	## Overview
11
12	Cloudflare Images provides two powerful features:
13
14	1. Images API: Upload, store, and serve images with automatic optimization and variants
15	2. Image Transformations: Resize, optimize, and transform any publicly accessible image
16
17	Key Benefits:
18	- Global CDN delivery
19	- Automatic WebP/AVIF conversion
20	- Variants for different use cases (up to 100)
21	- Direct creator upload (user uploads without API keys)
22	- Signed URLs for private images
23	- Transform any image via URL or Workers
24
25	---
26
27	## Quick Start (5 Minutes)
28
29	### 1. Enable Cloudflare Images
30
31	Log into Cloudflare dashboard → Images → Enable for your account.
32
33	Get your Account ID and create an API token with Cloudflare Images: Edit permissions.
34
35	Why this matters:
36	- Account ID and API token are required for all API operations
37	- Images Free plan includes limited transformations
38
39	### 2. Upload Your First Image
40
41	```bash
42	curl --request POST \
43	--url https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1 \
44	--header 'Authorization: Bearer <API_TOKEN>' \
45	--header 'Content-Type: multipart/form-data' \
46	--form 'file=@./image.jpg'
47	```
48
49	Response includes:
50	- `id`: Image ID for serving
51	- `variants`: Array of delivery URLs
52
53	CRITICAL:
54	- Use `multipart/form-data` encoding (NOT `application/json`)
55	- Image ID is automatically generated (or use custom ID)
56
57	### 3. Serve the Image
58
59	```html
60	<img src="https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/public" />
61	```
62
63	Default `public` variant serves the image. Replace with your own variant names.
64
65	### 4. Enable Image Transformations
66
67	Dashboard → Images → Transformations → Select your zone → Enable for zone
68
69	Now you can transform ANY image:
70
71	```html
72	<img src="/cdn-cgi/image/width=800,quality=85/uploads/photo.jpg" />
73	```
74
75	Why this matters:
76	- Works on images stored OUTSIDE Cloudflare Images
77	- Automatic caching on Cloudflare's global network
78	- No additional storage costs
79
80	### 5. Transform via Workers (Advanced)
81
82	```typescript
83	export default {
84	async fetch(request: Request): Promise<Response> {
85	const imageURL = "https://example.com/image.jpg";
86
87	return fetch(imageURL, {
88	cf: {
89	image: {
90	width: 800,
91	quality: 85,
92	format: "auto" // WebP/AVIF for supporting browsers
93	}
94	}
95	});
96	}
97	};
98	```
99
100	---
101
102	## The 3-Feature System
103
104	### Feature 1: Images API (Upload & Storage)
105
106	Store images on Cloudflare's network and serve them globally.
107
108	Upload Methods:
109	1. File Upload - Upload files directly from your server
110	2. Upload via URL - Ingest images from external URLs
111	3. Direct Creator Upload - Generate one-time upload URLs for user uploads
112
113	Serving Options:
114	- Default domain: `imagedelivery.net`
115	- Custom domains: `/cdn-cgi/imagedelivery/...`
116	- Signed URLs: Private images with expiry tokens
117
118	See: `templates/upload-api-basic.ts`, `templates/direct-creator-upload-backend.ts`
119
120	### Feature 2: Image Transformations
121
122	Optimize and resize ANY image (stored in Images or external).
123
124	Two Methods:
125	1. URL Transformations - Special URL format
126	2. Workers Transformations - Programmatic control via fetch
127
128	Common Transformations:
129	- Resize: `width=800,height=600,fit=cover`
130	- Optimize: `quality=85,format=auto`
131	- Effects: `blur=10,sharpen=3`
132	- Crop: `gravity=face,zoom=0.5`
133
134	See: `templates/transform-via-url.ts`, `templates/transform-via-workers.ts`
135
136	### Feature 3: Variants
137
138	Predefined image sizes for different use cases.
139
140	Named Variants (up to 100):
141	- Create once, use everywhere
142	- Example: `t

People who liked this also viewed

6 picks

Type