Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Variants let you specify how images should be resized for different use cases. B
:::note

Cloudflare Images can deliver SVG files but will not resize them because it is an inherently scalable format.
Resize via the Cloudflare dashboard.
Resize via the Cloudflare dashboard.
:::

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
Expand Down
8 changes: 4 additions & 4 deletions src/content/docs/images/pricing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar:

---

By default, all users are on the Images Free plan. The Free plan includes access to the transformations feature, which lets you optimize images stored outside of Images, like in R2.
By default, all users are on the Images Free plan. The Free plan includes access to the transformations feature, which lets you optimize images stored outside of Images, like in R2.

The Paid plan allows transformations, as well as access to storage in Images.

Expand All @@ -29,7 +29,7 @@ Once you exceed 5,000 unique transformations:

To request more than 5,000 unique transformations each month, you can purchase an Images Paid plan.

## Images Paid
## Images Paid

When you purchase an Images Paid plan, you can choose your own storage or add storage in Images.

Expand Down Expand Up @@ -61,15 +61,15 @@ The `format` parameter counts as only 1 billable transformation, even if multipl

A retail website has 1,000 original product images that get served in 5 different sizes each month. This results in 5,000 unique transformations — or a cost of $2.50 per month.

### Images Stored
### Images Stored

Storage in Images is available only with an Images Paid plan. You can purchase storage in increments of $5 for every 100,000 images stored per month.

You can create predefined variants to specify how an image should be resized, such as `thumbnail` as 100x100 and `hero` as 1600x500.

Only uploaded images count toward Images Stored; defining variants will not impact your storage limit.

### Images Delivered
### Images Delivered

For images that are stored in Images, you will incur $1 for every 100,000 images delivered per month. This metric does not include transformed images that are stored in remote sources.

Expand Down
4 changes: 2 additions & 2 deletions src/content/docs/images/transform-images/draw-overlays.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -78,13 +78,13 @@ The accepted options for the overlaid image are `opacity`, `repeat`, `top`, `lef
// Fetch image and watermark
const img = await fetch('https://example.com/image.png');
const watermark = await fetch('https://example.com/watermark.png');

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

return response;
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ By default, this feature uses information from the user agent, which detects the

### Client hints

For more accurate results, you can use client hints to send the user's browser information as request headers.
For more accurate results, you can use client hints to send the user's browser information as request headers.

This method currently works only on Chromium-based browsers such as Chrome, Edge, and Opera.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ If you are new, review how to [create your first Worker](/workers/get-started/gu

To start, you will need to set up your project to use the following resources on the Developer Platform:

* [Images](/images/transform-images/bindings/) to transform, resize, and encode images directly from your Worker.
* [Images](/images/transform-images/bindings/) to transform, resize, and encode images directly from your Worker.
* [R2](/r2/api/workers/workers-api-usage/) to connect the bucket for storing transformed images.
* [Assets](/workers/static-assets/binding/) to access a static image that will be used as the visual watermark.

Expand Down Expand Up @@ -131,7 +131,7 @@ export default {
if (!file || typeof file.arrayBuffer !== "function") {
return new Response("No image file provided", { status: 400 });
}

// Read uploaded image as array buffer
const fileBuffer = await file.arrayBuffer();
} catch (err) {
Expand Down Expand Up @@ -178,7 +178,7 @@ export default {
if (!file || typeof file.arrayBuffer !== "function") {
return new Response("No image file provided", { status: 400 });
}

// Read uploaded image as array buffer
const fileBuffer = await file.arrayBuffer();

Expand Down Expand Up @@ -222,7 +222,7 @@ export default {
if (!file || typeof file.arrayBuffer !== "function") {
return new Response("No image file provided", { status: 400 });
}

// Read uploaded image as array buffer
const fileBuffer = await file.arrayBuffer();

Expand Down Expand Up @@ -281,7 +281,7 @@ export default {
if (!file || typeof file.arrayBuffer !== "function") {
return new Response("No image file provided", { status: 400 });
}

// Read uploaded image as array buffer
const fileBuffer = await file.arrayBuffer();

Expand All @@ -303,10 +303,10 @@ export default {

// Add timestamp to file name
const fileName = `image-${Date.now()}.avif`;

// Upload to R2
await env.R2.put(fileName, imageResponse.body)

return new Response(`Image uploaded successfully as ${fileName}`, { status: 200 });
} catch (err) {
console.log(err.message)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Your import job is now created. You can review the job status on the Sourcing Ki

:::note

Sourcing Kit will warn you when you are about to reach the limit for your plan space quota. When you exhaust the space available in your plan, the importing jobs will be aborted. If you see this warning on Sourcing Kit’s main page, select **View plan** to change your plan’s limits.
Sourcing Kit will warn you when you are about to reach the limit for your plan space quota. When you exhaust the space available in your plan, the importing jobs will be aborted. If you see this warning on Sourcing Kit’s main page, select **View plan** to change your plan’s limits.
:::

## Define a new source
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Custom paths support:

:::note

Images with custom ID paths cannot be made private using [signed URL tokens](/images/manage-images/serve-images/serve-private-images). Additionally, when [serving images](/images/manage-images/serve-images/), any `%` characters present in Custom IDs must be encoded to `%25` in the image delivery URLs.
Images with custom ID paths cannot be made private using [signed URL tokens](/images/manage-images/serve-images/serve-private-images). Additionally, when [serving images](/images/manage-images/serve-images/), any `%` characters present in Custom IDs must be encoded to `%25` in the image delivery URLs.
:::

Make a `POST` request using the example below as reference. You can use custom ID paths when you upload via a URL or with a direct file upload.
Expand Down