### URL Gravity Examples

Source: https://developers.cloudflare.com/images/optimization/features/index.md

Examples of how to use the gravity parameter in image URLs.

```url
gravity=auto

g=auto

gravity=face

gravity=left

gravity=0.5x1
```

--------------------------------

### Start Local Development with Wrangler

Source: https://developers.cloudflare.com/images/optimization/binding

Starts a local development server using Wrangler for testing the Images API. This command initiates the low-fidelity offline version by default.

```bash
npx wrangler dev
```

--------------------------------

### Example Custom Domain Image URL

Source: https://developers.cloudflare.com/images/optimization/hosted-images/serve-from-custom-domains/index.md

An example of an image URL served from a custom domain, illustrating the structure with actual values.

```text
https://example.com/cdn-cgi/imagedelivery/ZWd9g1K7eljCn_KDTu_MWA/083eb7b2-5392-4565-b69e-aff66acddd00/public
```

--------------------------------

### Start Local Development with Remote Images API

Source: https://developers.cloudflare.com/images/optimization/binding

Starts a local development server using Wrangler with the `--remote` flag to test the high-fidelity remote version of the Images API.

```bash
npx wrangler dev --remote
```

--------------------------------

### Batch upload example

Source: https://developers.cloudflare.com/images/llms-full.txt

Example of using a batch token to upload images, bypassing global rate limits.

```APIDOC
## Batch Upload Example

### Description
This example demonstrates how to use a batch token for image uploads.

### Method
POST

### Endpoint
`https://batch.imagedelivery.net/images/v1`

### Headers
- **Authorization**: `Bearer <BATCH_TOKEN>`
```

--------------------------------

### Batch API Request Example

Source: https://developers.cloudflare.com/images/storage/upload-images/images-batch/index.md

Example of how to make a request using a batch token. This request is made to the `batch.imagedelivery.net` host.

```APIDOC
## POST /images/v1

### Description
Example request using a batch token to upload an image.

### Method
POST

### Endpoint
`https://batch.imagedelivery.net/images/v1`

### Request Example
```bash
curl "https://batch.imagedelivery.net/images/v1" \
--header "Authorization: Bearer <BATCH_TOKEN>"
```
```

--------------------------------

### Example Image Delivery URL

Source: https://developers.cloudflare.com/images/llms-full.txt

An example of a fully formed Images URL, including a sample account hash, image ID, and variant name.

```text
https://imagedelivery.net/ZWd9g1K7eljCn_KDTu_MWA/083eb7b2-5392-4565-b69e-aff66acddd00/public
```

--------------------------------

### Optimize Image from Fetch Response

Source: https://developers.cloudflare.com/images/optimization/binding

This example demonstrates how to fetch an image from a URL, then use the Images binding to transform and transcode it to WebP format.

```javascript
export default {
  async fetch(request, env) {
    const imageURL = "https://example.com/photo.jpg";


    const response = await fetch(imageURL);


    return (
      await env.IMAGES.input(response.body)
        .transform({ width: 800 })
        .output({ format: "image/webp" })
    ).response();
  },
};

```

```javascript
export default {
  async fetch(request, env) {
    const imageURL = "https://example.com/photo.jpg";


    const response = await fetch(imageURL);


    return (
      await env.IMAGES
        .input(response.body)
        .transform({ width: 800 })
        .output({ format: "image/webp" })
    ).response();
  },
};

```

--------------------------------

### Workers Gravity Examples

Source: https://developers.cloudflare.com/images/optimization/features/index.md

Examples of how to configure gravity using Cloudflare Workers.

```javascript
cf: {image: {gravity: "auto"}}

cf: {image: {gravity: "face"}}

cf: {image: {gravity: "left"}}

cf: {image: {gravity: {x:0.5, y:0.2}}}
```

--------------------------------

### Dynamic Image Format Selection in Worker

Source: https://developers.cloudflare.com/images/optimization/features

A Worker example demonstrating how to dynamically select an image format based on the 'Accept' header, prioritizing AVIF and WebP.

```javascript
const accept = request.headers.get("accept");
let image = {};

if (/image\/avif/.test(accept)) {
  image.format = "avif";
} else if (/image\/webp/.test(accept)) {
  image.format = "webp";
}

return fetch(url, { cf: { image } });
```

--------------------------------

### Image Optimization with format=auto

Source: https://developers.cloudflare.com/images/llms-full.txt

This example shows how to use the `format=auto` option with Cloudflare Images to enable the use of modern formats like WebP and AVIF. This is recommended when using image transformations.

```url
format=auto
```

--------------------------------

### Resize Hosted Image and Transcode to WebP

Source: https://developers.cloudflare.com/images/optimization/binding

This snippet shows how to get the raw bytes of a hosted image using `env.IMAGES.hosted.image().bytes()`, then resize and transcode it to WebP.

```javascript
// Get the raw bytes of a hosted image
const bytes = await env.IMAGES.hosted.image("IMAGE_ID").bytes();


// Resize and transcode the image
const response = (
  await env.IMAGES.input(bytes)
    .transform({ width: 400 })
    .output({ format: "image/webp" })
).response();


return response;

```

```javascript
// Get the raw bytes of a hosted image
const bytes = await env.IMAGES.hosted.image("IMAGE_ID").bytes();


// Resize and transcode the image
const response = (
  await env.IMAGES.input(bytes)
    .transform({ width: 400 })
    .output({ format: "image/webp" })
).response();


return response;

```

--------------------------------

### Images Binding Setup (Wrangler Configuration)

Source: https://developers.cloudflare.com/images/optimization/binding

Configure the Images binding in your Wrangler configuration file to connect your Worker to the Images service.

```APIDOC
## Setup

You can define variables in the Wrangler configuration file of your Worker project's directory. These variables are bound to external resources at runtime, and you can then interact with them through this variable.

To bind Images to your Worker, add the following to the end of your Wrangler configuration file:

### TOML
```toml
[images]
binding = "IMAGES"
```

### YAML
```yaml
images:
  binding: "IMAGES" # i.e. available in your Worker on env.IMAGES
```
```

--------------------------------

### Cloudflare Images Fit Configuration

Source: https://developers.cloudflare.com/images/llms-full.txt

Example of configuring the 'fit' parameter within Cloudflare Images settings. This sets the image fitting behavior to 'pad'.

```javascript
cf: {
  image: {
    fit: "pad"
  }
}
```

--------------------------------

### Transform and Output Image in JavaScript Worker

Source: https://developers.cloudflare.com/images/optimization/binding/index.md

This JavaScript example demonstrates fetching an image, passing its body to the Images binding, transforming it (resizing to 800px width), and outputting it in WebP format. The response is then returned from the Worker.

```javascript
export default {
  async fetch(request, env) {
    const imageURL = "https://example.com/photo.jpg";
    const response = await fetch(imageURL);
    return (
      await env.IMAGES.input(response.body)
        .transform({ width: 800 })
        .output({ format: "image/webp" })
    ).response();
  },
};
```

--------------------------------

### Images Binding: .input() Method

Source: https://developers.cloudflare.com/images/optimization/binding

The `.input()` method creates an optimization handle for an image, accepting image bytes from various sources. It's the starting point for all image manipulation operations.

```APIDOC
## Methods

### `.input(stream)`

Creates an optimization handle for an image. All operations begin with this method. Accepts image bytes from any source, including Images, R2, a `fetch()` response, or a request body.

Returns a handle that you can use to chain `.transform()`, `.draw()`, and `.output()` calls.

#### Example Usage

```javascript
export default {
  async fetch(request, env) {
    const imageURL = "https://example.com/photo.jpg";

    const response = await fetch(imageURL);

    return (
      await env.IMAGES.input(response.body)
        .transform({ width: 800 })
        .output({ format: "image/webp" })
    ).response();
  },
};
```
```

--------------------------------

### Accept header for WebP

Source: https://developers.cloudflare.com/images/polish/compression

This is an example of an Accept header that includes WebP, indicating browser support for the format. Polish creates WebP versions when the browser includes this in its request.

```http
Accept: image/avif,image/webp,image/*,*/*;q=0.8
```

--------------------------------

### Draw Overlay Image

Source: https://developers.cloudflare.com/images/optimization/transformations/draw-overlays/index.md

This example demonstrates how to draw a logo image as an overlay on a transformed image. It specifies the image URL, its position relative to the bottom and right edges, its maximum dimensions, and its opacity.

```javascript
fetch(imageURL, {

  cf: {

    image: {

      width: 800,

      height: 600,

      draw: [

        {

          url: "https://example.com/branding/logo.png", // draw this image

          bottom: 5, // 5 pixels from the bottom edge

          right: 5, // 5 pixels from the right edge

          fit: "contain", // make it fit within 100x50 area

          width: 100,

          height: 50,

          opacity: 0.8, // 20% transparent

        },

      ],

    },

  },

});
```

--------------------------------

### API Request for Image Export

Source: https://developers.cloudflare.com/images/llms-full.txt

Example GET request to export an image using the Cloudflare Images API. Replace <ACCOUNT_ID> and <IMAGE_ID> with your specific values. The <IMAGE_ID> must be URL encoded.

```http
GET accounts/<ACCOUNT_ID>/images/v1/<IMAGE_ID>/blob
```

--------------------------------

### .list(options)

Source: https://developers.cloudflare.com/images/storage/binding

Lists images in your account with pagination. Returns `ImageList`.

```APIDOC
## .list(options)

### Description
Lists images in your account with pagination. Returns `ImageList`.

### Method
GET

### Endpoint
`/images/list` (This is a conceptual representation, actual endpoint is via Worker binding)

### Parameters
#### Path Parameters
None

#### Query Parameters
- **limit** (number) - Optional - The maximum number of images to return in a page.
- **cursor** (string) - Optional - The continuation token returned by the previous `list()` call. Omit on the first page.
- **sortOrder** ('asc' | 'desc') - Optional - The order to sort results in by `uploaded` timestamp. Defaults to `asc`.
- **creator** (string) - Optional - Filter results to images uploaded with this creator identifier.

### Request Example
```json
{
  "limit": 10,
  "cursor": "previous-cursor-token",
  "sortOrder": "desc",
  "creator": "user123"
}
```

### Response
#### Success Response (200)
- **ImageList** - Contains a list of images and a cursor for pagination.

#### Response Example
```json
{
  "images": [
    {
      "id": "image-id-1",
      "upload_id": "upload-uuid-1",
      "filename": "image1.jpg",
      "uploaded": "2023-10-27T10:00:00Z",
      "requireSignedURLs": false,
      "metadata": {},
      "creator": "user123",
      "variants": []
    },
    {
      "id": "image-id-2",
      "upload_id": "upload-uuid-2",
      "filename": "image2.png",
      "uploaded": "2023-10-26T09:00:00Z",
      "requireSignedURLs": false,
      "metadata": {},
      "creator": "user123",
      "variants": []
    }
  ],
  "cursor": "next-cursor-token"
}
```
```

--------------------------------

### Cover Fit Behavior Example

Source: https://developers.cloudflare.com/images/llms-full.txt

Illustrates the 'cover' fit behavior. The image fills the entire target area, shrinking or enlarging as needed, and cropping overflow if aspect ratios differ. The output dimensions exactly match the requested width and height.

```text
Fills the entire target area, shrinking or enlarging the image if needed. The output area always matches the requested `width` and `height` dimensions exactly.

When the original and target aspect ratios differ, the image is resized to cover the full target area and any overflow is cropped. Use the [gravity](#gravity) parameter to control which part of the image is preserved during cropping.

In the example below, the 1080×720 image is first resized to 750×500 (matching the requested height) to fit the target area, then cropped from the left and right edges to its final 500x500 dimensions.

When the original image is smaller than the target area, it upscales instead. To avoid upscaling, use `crop`.
```

--------------------------------

### Get Image Details using the Images Binding

Source: https://developers.cloudflare.com/images/storage/binding/index.md

Gets the metadata for an image using its handle. Returns ImageMetadata or null if the image does not exist. This operation is performed on an image handle obtained from env.IMAGES.hosted.image(imageId).

```javascript
// Example usage within a Worker:
// const metadata = await env.IMAGES.hosted.image('your-image-id').details();
```

--------------------------------

### List Images using Worker Binding

Source: https://developers.cloudflare.com/images/storage/binding

Demonstrates how to list hosted images using the `env.IMAGES.hosted.list` method. Supports pagination with `limit` and `cursor`, and filtering by `creator`.

```javascript
// Assuming env.IMAGES is bound to the Images service

// List first 10 images in ascending order
const imageList = await env.IMAGES.hosted.list({ limit: 10, sortOrder: 'asc' });

// List next page of images using cursor
const nextImageList = await env.IMAGES.hosted.list({ limit: 10, cursor: imageList.cursor });

// List images uploaded by a specific creator
const userImages = await env.IMAGES.hosted.list({ creator: 'user-123' });

```

--------------------------------

### Get Image Bytes using the Images Binding

Source: https://developers.cloudflare.com/images/storage/binding/index.md

Gets the raw bytes of an image as a ReadableStream<Uint8Array> using its handle. Returns null if the image does not exist. This streams the original uploaded file and can be used for optimization or serving.

```javascript
// Example usage within a Worker:
// const imageBytes = await env.IMAGES.hosted.image('your-image-id').bytes();
```

--------------------------------

### Get the details for a single image

Source: https://developers.cloudflare.com/images/llms-full.txt

Retrieves the details for a specific image using its ID.

```APIDOC
## GET /images/{IMAGE_ID}/details

### Description
Fetches the metadata and details for a specific image identified by its unique ID.

### Method
GET

### Endpoint
`/images/{IMAGE_ID}/details`

### Parameters
#### Path Parameters
- **IMAGE_ID** (string) - Required - The unique identifier of the image.

### Response
#### Success Response (200)
- **details** (object) - An object containing the details of the image.

#### Response Example
```json
{
  "details": {
    "id": "IMAGE_ID",
    "filename": "example.jpg",
    "metadata": { "reviewed": false },
    "uploaded_at": "2023-10-27T10:00:00Z"
  }
}
```
```

--------------------------------

### Get Image Details

Source: https://developers.cloudflare.com/images/storage/binding

Retrieves the details for a specific image using its ID. Returns a 404 if the image is not found.

```javascript
export default {
  async fetch(request, env) {
    const details = await env.IMAGES.hosted.image("IMAGE_ID").details();
    if (!details) {
      return new Response("Not found", { status: 404 });
    }
    return Response.json(details);
  },
};
```

```javascript
export default {
  async fetch(request, env) {
    const details = await env.IMAGES.hosted.image("IMAGE_ID").details();
    if (!details) {
      return new Response("Not found", { status: 404 });
    }
    return Response.json(details);
  },
};
```

--------------------------------

### .image(imageId).details()

Source: https://developers.cloudflare.com/images/storage/binding

Gets the metadata for an image. Returns `ImageMetadata` or `null` if no image with the given ID exists.

```APIDOC
## .image(imageId).details()

### Description
Gets the metadata for an image. Returns `ImageMetadata` or `null` if no image with the given ID exists.

### Method
GET

### Endpoint
`/images/{imageId}/details` (This is a conceptual representation, actual endpoint is via Worker binding)

### Parameters
#### Path Parameters
- **imageId** (string) - Required - The ID of the image (UUID or custom ID).

#### Query Parameters
None

#### Request Body
None

### Request Example
(No request body, just calling the method on the handle)

### Response
#### Success Response (200)
- **ImageMetadata** - Contains metadata about the image.

#### Response Example
```json
{
  "id": "custom-image-id",
  "upload_id": "upload-uuid",
  "filename": "my-image.jpg",
  "uploaded": "2023-10-27T10:00:00Z",
  "requireSignedURLs": true,
  "metadata": {"key": "value"},
  "creator": "user123",
  "variants": []
}
```
```

--------------------------------

### Update Image Metadata

Source: https://developers.cloudflare.com/images/llms-full.txt

Updates the metadata for a specific image using its ID. The example shows how to set a 'reviewed' flag to true.

```javascript
export default {

  async fetch(request, env) {

    const updated = await env.IMAGES.hosted.image("IMAGE_ID").update({

      metadata: { reviewed: true },

    });

    return Response.json(updated);

  },

};
```

```typescript
export default {

  async fetch(request, env) {

    const updated = await env.IMAGES.hosted.image("IMAGE_ID").update({

      metadata: { reviewed: true },

    });

    return Response.json(updated);

  },

};
```

--------------------------------

### Export Image Blob

Source: https://developers.cloudflare.com/images/storage/manage-images/export-images

Make a GET request to retrieve the blob of a specific image. The `<IMAGE_ID>` must be fully URL encoded.

```APIDOC
## GET accounts/<ACCOUNT_ID>/images/v1/<IMAGE_ID>/blob

### Description
Retrieves the original version of a specific image.

### Method
GET

### Endpoint
`accounts/<ACCOUNT_ID>/images/v1/<IMAGE_ID>/blob`

### Parameters
#### Path Parameters
- **ACCOUNT_ID** (string) - Required - Your Cloudflare account ID.
- **IMAGE_ID** (string) - Required - The ID of the image to export. Must be URL encoded.
```

--------------------------------

### Set Image Format to Auto

Source: https://developers.cloudflare.com/images/llms-full.txt

Use `format=auto` or `f=auto` to automatically serve the most efficient image format supported by the browser. This is the default for hosted images.

```url
format=auto
f=auto
```

--------------------------------

### Enabling Client Hints with HTML meta tag

Source: https://developers.cloudflare.com/images/optimization/make-responsive-images/index.md

Opt-in to client hints by adding a `<meta>` tag in the `<head>` of your HTML. This allows Cloudflare to receive viewport width and device pixel ratio information for more accurate image sizing.

```html
<meta
  http-equiv="Delegate-CH"
  content="sec-ch-dpr {ZONE}; sec-ch-viewport-width {ZONE}"
/>
```

--------------------------------

### Configure Wrangler Bindings for Images, R2, and Assets

Source: https://developers.cloudflare.com/images/tutorials/optimize-user-uploaded-image

Add Images, R2, and Assets bindings to your Wrangler configuration file. Replace `<BUCKET>` with your R2 bucket name and `./<DIRECTORY>` with the path to your assets directory.

```json
{
  "images": {
    "binding": "IMAGES"
  },
  "r2_buckets": [
    {
      "binding": "R2",
      "bucket_name": "<BUCKET>"
    }
  ],
  "assets": {
    "directory": "./<DIRECTORY>",
    "binding": "ASSETS"
  }
}
```

--------------------------------

### Example Public SVG URL

Source: https://developers.cloudflare.com/images/llms-full.txt

Applying the default public variant to an SVG in Cloudflare Images allows it to be delivered without resizing or cropping.

```url
imagedelivery.net/account_hash/svg_id/public
```

--------------------------------

### Enable Fast Compression

Source: https://developers.cloudflare.com/images/optimization/features/index.md

Use the compression=fast parameter to select an output format that compresses quickly. This option prioritizes encoding speed over quality and file size.

```url
compression=fast
```

--------------------------------

### Enable Slow Connection Quality (SCQ)

Source: https://developers.cloudflare.com/images/optimization/features/index.md

Overrides image quality for slow connections. Requires client hints to be enabled via HTTP headers.

```url
slow-connection-quality=50

scq=50
```

--------------------------------

### Add Additional Breakpoint Width

Source: https://developers.cloudflare.com/images/optimization/features/index.md

Extend the default breakpoint widths for `width=auto` by adding a new breakpoint. This example adds a breakpoint at 1920 pixels.

```text
wbreakpoints=320;768;960;1200;1920
```

--------------------------------

### Configure Wrangler Bindings for Images, R2, and Assets (TOML)

Source: https://developers.cloudflare.com/images/tutorials/optimize-user-uploaded-image

Add Images, R2, and Assets bindings to your Wrangler configuration file using TOML format. Replace `<BUCKET>` with your R2 bucket name and `./<DIRECTORY>` with the path to your assets directory.

```toml
[images]
binding = "IMAGES"

[[r2_buckets]]
binding = "R2"
bucket_name = "<BUCKET>"

[assets]
directory = "./<DIRECTORY>"
binding = "ASSETS"
```

--------------------------------

### Get Single Image Details

Source: https://developers.cloudflare.com/images/storage/binding/index.md

Fetches the metadata and access control details for a specific image using its ID. Returns a 404 if the image is not found.

```javascript
export default {

  async fetch(request, env) {

    const details = await env.IMAGES.hosted.image("IMAGE_ID").details();

    if (!details) {

      return new Response("Not found", { status: 404 });

    }

    return Response.json(details);

  },

};
```

```typescript
export default {

  async fetch(request, env) {

    const details = await env.IMAGES.hosted.image("IMAGE_ID").details();

    if (!details) {

      return new Response("Not found", { status: 404 });

    }

    return Response.json(details);

  },

};
```

--------------------------------

### Implement Eager Loading for Images

Source: https://developers.cloudflare.com/images/tutorials/optimize-mobile-viewing

Use the `loading="eager"` attribute on `<img>` tags for images that are critical and should load immediately with the initial page load. This is recommended for images already in the viewport.

```html
<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />
```

--------------------------------

### Configure Wrangler with Images, R2, and Assets Bindings (JSONC)

Source: https://developers.cloudflare.com/images/tutorials/optimize-user-uploaded-image/index.md

Configure your Wrangler project to include bindings for Images, R2 buckets, and Assets. Replace placeholders with your specific bucket name and assets directory.

```json
{
  "images": {
    "binding": "IMAGES"
  },
  "r2_buckets": [
    {
      "binding": "R2",
      "bucket_name": "<BUCKET>"
    }
  ],
  "assets": {
    "directory": "./<DIRECTORY>",
    "binding": "ASSETS"
  }
}
```

--------------------------------

### Export image blob via API

Source: https://developers.cloudflare.com/images/storage/manage-images/export-images/index.md

Make a GET request to this endpoint to download the original version of an image. Ensure the `<IMAGE_ID>` is URL encoded in the request.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/images/","name":"Cloudflare Images"}},{"@type":"ListItem","position":3,"item":{"@id":"/images/storage/","name":"Storage"}},{"@type":"ListItem","position":4,"item":{"@id":"/images/storage/manage-images/","name":"Manage hosted images"}},{"@type":"ListItem","position":5,"item":{"@id":"/images/storage/manage-images/export-images/","name":"Export images"}}]}
```

--------------------------------

### env.IMAGES.hosted.list(options)

Source: https://developers.cloudflare.com/images/storage/binding/index.md

Lists images with pagination support. Accepts limit and cursor options to control the number of images returned per page.

```APIDOC
## env.IMAGES.hosted.list(options)

### Description
Lists images stored in Cloudflare Images, with support for pagination.

### Parameters
#### options (`ImageListOptions`)
* `limit` (number) - The maximum number of images to return per page. Defaults to 100.
* `cursor` (string) - An opaque string cursor for fetching the next page of results.
```

--------------------------------

### Upload Image Response Structure

Source: https://developers.cloudflare.com/images/llms-full.txt

This is an example of a successful response when uploading an image to Cloudflare Images. It includes the image ID, filename, upload timestamp, and available variants.

```json
{
  "result": {
    "id": "<PATH_TO_YOUR_IMAGE>",
    "filename": "<YOUR_IMAGE>",
    "uploaded": "2022-04-20T09:51:09.559Z",
    "requireSignedURLs": false,
    "variants": [
      "https://imagedelivery.net/Vi7wi5KSItxGFsWRG2Us6Q/<PATH_TO_YOUR_IMAGE>/public"
    ]
  },
  "result_info": null,
  "success": true,
  "errors": [],
  "messages": []
}
```

--------------------------------

### Transform and Output Image in TypeScript Worker

Source: https://developers.cloudflare.com/images/optimization/binding/index.md

This TypeScript example shows how to fetch an image, use the Images binding to transform it (resizing to 800px width), and specify the output format as WebP. The transformed image response is then returned.

```typescript
export default {
  async fetch(request, env) {
    const imageURL = "https://example.com/photo.jpg";
    const response = await fetch(imageURL);
    return (
      await env.IMAGES
        .input(response.body)
        .transform({ width: 800 })
        .output({ format: "image/webp" })
    ).response();
  },
};
```

--------------------------------

### Schema for Transcode Images Breadcrumb Navigation

Source: https://developers.cloudflare.com/images/llms-full.txt

This JSON-LD snippet represents a breadcrumb trail for the 'Transcode images' page, showing the navigation path from the directory to the specific example.

```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/images/","name":"Cloudflare Images"}},{"@type":"ListItem","position":3,"item":{"@id":"/images/examples/","name":"Examples"}},{"@type":"ListItem","position":4,"item":{"@id":"/images/examples/transcode-from-workers-ai/","name":"Transcode images"}}]}
```

--------------------------------

### Draw Watermark with Parameters

Source: https://developers.cloudflare.com/images/optimization/transformations/draw-overlays/index.md

Apply transformations like rotation and width to a watermark before drawing it over a base image. This example also uses opacity and repeat options for the watermark.

```javascript
const response = (
  await env.IMAGES.input(img.body)
    .transform({ width: 1024 })
    .draw(watermark.body, { opacity: 0.25, repeat: true })
    .output({ format: "image/avif" }}
).response();
```

--------------------------------

### List Images using the Images Binding

Source: https://developers.cloudflare.com/images/storage/binding/index.md

Lists images in your account with pagination using env.IMAGES.hosted.list. Options include limit, cursor, sortOrder, and creator filtering. Refer to ImageListOptions for details.

```javascript
// Example usage within a Worker:
// await env.IMAGES.hosted.list({ limit: 10, sortOrder: 'desc' });
```

--------------------------------

### Set Account-Level Browser TTL

Source: https://developers.cloudflare.com/images/optimization/hosted-images/browser-ttl/index.md

Configure the Browser TTL for all images in your account. This overrides the default TTL. Set the TTL in seconds, for example, 31536000 for one year.

```bash
curl --request PATCH 'https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1/config' \
--header "Authorization: Bearer <API_TOKEN>" \
--header "Content-Type: application/json" \
--data '{ \
  "browser_ttl": 31536000 \
}'
```

--------------------------------

### Enabling Client Hints with HTTP response headers

Source: https://developers.cloudflare.com/images/optimization/make-responsive-images/index.md

Configure client hints by adding specific HTTP response headers. This method provides Cloudflare with essential information about the client's viewport and device pixel ratio.

```http
critical-ch: sec-ch-viewport-width, sec-ch-dpr
permissions-policy: ch-dpr=("{ZONE}"), ch-viewport-width=("{ZONE}")
```

--------------------------------

### .image(imageId).bytes()

Source: https://developers.cloudflare.com/images/storage/binding

Gets the raw bytes of an image. Returns `ReadableStream<Uint8Array>` or `null` if no image with the given ID exists. This streams the original uploaded file.

```APIDOC
## .image(imageId).bytes()

### Description
Gets the raw bytes of an image. Returns `ReadableStream<Uint8Array>` or `null` if no image with the given ID exists. This streams the original uploaded file.

### Method
GET

### Endpoint
`/images/{imageId}/bytes` (This is a conceptual representation, actual endpoint is via Worker binding)

### Parameters
#### Path Parameters
- **imageId** (string) - Required - The ID of the image (UUID or custom ID).

#### Query Parameters
None

#### Request Body
None

### Request Example
(No request body, just calling the method on the handle)

### Response
#### Success Response (200)
- **ReadableStream<Uint8Array>** - A stream of the image's raw bytes.

#### Response Example
(A ReadableStream object representing the image bytes)
```

--------------------------------

### Set Image Format to Auto

Source: https://developers.cloudflare.com/images/optimization/features

Use `format=auto` or `f=auto` to automatically serve the most efficient format supported by the browser. This is the default for hosted images. Workers can also set this.

```url
format=auto
f=auto
```

```javascript
cf: {image: {format: "avif"}}
```