Cloudflare: Add image optimization docs

pages/cloudflare/get-started.mdx

@@ -76,6 +76,11 @@ You can create one yourself in the root directory of your Next.js app with the n
     //   "bucket_name": "<BUCKET_NAME>",
     // },
   ],
+pnpm fix  "images": {
+    // Enable image optimization
+    // see https://opennext.js.org/cloudflare/howtos/image
+    "binding": "IMAGES"
+  }
 }
 ```
 

pages/cloudflare/howtos/image.mdx

@@ -2,18 +2,37 @@ import { Callout } from "nextra/components";
 
 ## Image Optimization
 
-Next.js has a builtin [`<Image>` component](https://nextjs.org/docs/pages/building-your-application/optimizing/images) to automatically optimize your images for faster page loads.
+Next.js has a builtin [`<Image>` component](https://nextjs.org/docs/pages/building-your-application/optimizing/images) to automatically optimize your images for faster page loads. To enable image optimization, you must either define an image binding or use a custom loader.
 
-In this post, we will look at how to integrate the Next.js image optimization with [Cloudflare Images](https://developers.cloudflare.com/images)
+### Use a Cloudflare Images binding
 
-### Enable Cloudflare Images
+The Cloudflare adapter provides a Next.js-compatible image optimization API using [Cloudflare Images](https://developers.cloudflare.com/images/) that can be [configured with `next.config.js`](https://nextjs.org/docs/app/api-reference/components/image#configuration-options).
 
-You first need to [enable Cloudflare Images](https://developers.cloudflare.com/images/get-started/#enable-transformations-on-your-zone) for your zone.
+The `IMAGES` binding must be defined to enable image optimization:
 
-It is strongly advised to restrict the image origins that can be transformed to where your images are hosted, i.e. a [R2 bucket](https://developers.cloudflare.com/r2/buckets/).
+```jsonc
+// wrangler.jsonc
+{
+  "images": {
+    "binding": "IMAGES",
+  },
+}
+```
+
+Image optimization can incur additional costs. See [Cloudflare Images pricing](https://developers.cloudflare.com/images/pricing/) for details.
+
+#### Compatibility notes
+
+- Only PNG, JPEG, WEBP, AVIF, GIF, and SVG are supported. Unsupported images will be returned unchanged without optimization.
+- [`minimumCacheTTL` configuration](https://nextjs.org/docs/app/api-reference/components/image#minimumcachettl) is not supported. All assets (static, local, or remote) are handled as either immutable (cache forever) or not. Except for the `immutable` attribute, it does not respect the cache behavior set by the `Cache-Control` header for non-static images.
+- [`dangerouslyAllowLocalIP` configuration](https://nextjs.org/docs/app/api-reference/components/image#dangerouslyallowlocalip) is not supported. Local IP addresses are always allowed if the URL is allowed by the `remotePatterns` configuration.
 
 ### Use a custom loader
 
+You first need to [enable Cloudflare Images](https://developers.cloudflare.com/images/get-started/#enable-transformations-on-your-zone) for your zone.
+
+It is strongly advised to restrict the image origins that can be transformed to where your images are hosted, i.e. a [R2 bucket](https://developers.cloudflare.com/r2/buckets/).
+
 You then need to configure your Next application to use a custom loader for Cloudflare Images.
 
 Create an `image-loader.ts` at the root of your application: