1# Common Patterns
2 
3## URL Transform Options
4 
5```
6width=<PX>   height=<PX>   fit=scale-down|contain|cover|crop|pad
7quality=85   format=auto|webp|avif|jpeg|png   dpr=2
8gravity=auto|face|left|right|top|bottom   sharpen=2   blur=10
9rotate=90|180|270   background=white   metadata=none|copyright|keep
10```
11 
12## Responsive Images (srcset)
13 
14```html
15<img src="https://imagedelivery.net/{hash}/{id}/width=800"
16  srcset=".../{id}/width=400 400w, .../{id}/width=800 800w, .../{id}/width=1200 1200w"
17  sizes="(max-width: 600px) 400px, 800px" />
18```
19 
20## Format Negotiation
21 
22```typescript
23async fetch(request: Request, env: Env): Promise<Response> {
24  const accept = request.headers.get('Accept') || '';
25  const format = /image\/avif/.test(accept) ? 'avif' : /image\/webp/.test(accept) ? 'webp' : 'jpeg';
26  return env.IMAGES.input(buffer).transform({ format, quality: 85 }).output().response();
27}
28```
29 
30## Direct Creator Upload
31 
32```typescript
33// Backend: Generate upload URL
34const response = await fetch(
35  `https://api.cloudflare.com/client/v4/accounts/${env.ACCOUNT_ID}/images/v2/direct_upload`,
36  { method: 'POST', headers: { 'Authorization': `Bearer ${env.API_TOKEN}` },
37    body: JSON.stringify({ requireSignedURLs: false, metadata: { userId } }) }
38);
39 
40// Frontend: Upload to returned uploadURL
41const formData = new FormData();
42formData.append('file', file);
43await fetch(result.uploadURL, { method: 'POST', body: formData });
44// Use: https://imagedelivery.net/{hash}/${result.id}/public
45```
46 
47## Transform & Store to R2
48 
49```typescript
50async fetch(request: Request, env: Env): Promise<Response> {
51  const file = (await request.formData()).get('image') as File;
52  const transformed = await env.IMAGES
53    .input(await file.arrayBuffer())
54    .transform({ width: 800, format: 'avif', quality: 80 })
55    .output();
56  await env.R2.put(`images/${Date.now()}.avif`, transformed.response().body);
57  return Response.json({ success: true });
58}
59```
60 
61## Watermarking
62 
63```typescript
64const watermark = await env.ASSETS.fetch(new URL('/watermark.png', request.url));
65const result = await env.IMAGES
66  .input(await image.arrayBuffer())
67  .draw(env.IMAGES.input(watermark.body).transform({ width: 100 }), { bottom: 20, right: 20, opacity: 0.7 })
68  .transform({ format: 'avif' })
69  .output();
70return result.response();
71```
72 
73## Device-Based Transforms
74 
75```typescript
76const ua = request.headers.get('User-Agent') || '';
77const isMobile = /Mobile|Android|iPhone/i.test(ua);
78return env.IMAGES.input(buffer)
79  .transform({ width: isMobile ? 400 : 1200, quality: isMobile ? 75 : 85, format: 'avif' })
80  .output().response();
81```
82 
83## Caching Strategy
84 
85```typescript
86async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
87  const cache = caches.default;
88  let response = await cache.match(request);
89  if (!response) {
90    response = await env.IMAGES.input(buffer).transform({ width: 800, format: 'avif' }).output().response();
91    response = new Response(response.body, { headers: { ...response.headers, 'Cache-Control': 'public, max-age=86400' } });
92    ctx.waitUntil(cache.put(request, response.clone()));
93  }
94  return response;
95}
96```
97 
98## Batch Processing
99 
100```typescript
101const results = await Promise.all(images.map(buffer =>
102  env.IMAGES.input(buffer).transform({ width: 800, fit: 'cover', format: 'avif' }).output()
103));
104```
105 
106## Error Handling
107 
108```typescript
109try {
110  return (await env.IMAGES.input(buffer).transform({ width: 800 }).output()).response();
111} catch (error) {
112  console.error('Transform failed:', error);
113  return new Response('Image processing failed', { status: 500 });
114}
115```
116