Merge pull request #368 from commerce-docs/byo-cdn-reference

Clarify CDN details for PaaS vs SaaS

Author: jeff-matthews

src/content/docs/sdk/reference/initializer.mdx

@@ -3,6 +3,9 @@ title: Initializer
 description: Initializer is a class that helps you initialize your package.
 ---
 
+import Aside from '@components/Aside.astro';
+import Badge from '@components/overrides/Badge.astro';
+
 ```typescript
 // my-domain-package/initializer.ts
 
@@ -41,12 +44,34 @@ window.addEventListener('load', initializers.mount);
 
 ## `setImageParamKeys(params)`
 
-The `setImageParamKeys` method is part of the initializers module in the `@dropins/tools` package.
-It allows you to set image parameters globally for all drop-ins that use the Image component.
+The `setImageParamKeys` method is part of the initializers module in the `@dropins/tools` package. It allows you to set image parameters globally for all drop-in components that use the [Image](/sdk/components/image/) component. CDN-based image optimization services, such as Fastly and Cloudflare, rely on these parameters to optimize images.
+
+### Default behavior
+
+Since Fastly is the default CDN for Adobe Commerce on Cloud, drop-in components add the following Fastly-style parameters to all image URLs by default:
+
+- `width`
+- `height`
+- `auto`
+- `quality`
+- `crop`
+- `fit`
+
+Example:
+
+```text
+/media/catalog/product/adobestoredata/ADB150.jpg?auto=webp&quality=80&crop=false&fit=cover&width=960&height=1191`
+```
+
+Technical details about CDN-based image optimization differ depending on your backend Adobe Commerce solution:
 
-### Default Behavior
+- <Badge tooltip="Applies to Adobe Commerce on Cloud projects (Adobe-managed PaaS infrastructure) and on-premises projects only." text="PaaS only" variant="note" href="https://experienceleague.adobe.com/en/docs/commerce/user-guides/product-solutions" /> Fastly is the default CDN-based image optimization service for Adobe Commerce on Cloud projects. Fastly-style parameters are used by default unless overridden via `setImageParamKeys`.
+  
+- <Badge tooltip="Applies to Adobe Commerce as a Cloud Service and Adobe Commerce Optimizer projects only (Adobe-managed SaaS infrastructure)." text="SaaS only" variant="success" href="https://experienceleague.adobe.com/en/docs/commerce/user-guides/product-solutions" /> Cloudflare is the default CDN-based image optimization service for Adobe Commerce as a Cloud Service and Adobe Commerce Optimizer projects. Fastly-style parameters are used but are proxied through a [Cloudflare Worker](https://developers.cloudflare.com/images/transform-images/transform-via-workers) to transform the parameters to Cloudflare-style parameters. Overriding the default parameters using `setImageParamKeys` may interfere with the proxy transformation and lead to unexpected results.
 
-By default, Fastly parameters are used if `setImageParamKeys` is not called or if no parameters are provided.
+<Aside type="tip" title="Override defaults">
+If necessary, you can override these parameters with the `setImageParamKeys` method. For example, if you are using a CDN provider that requires different parameters or URL patterns.
+</Aside>
 
 ### Parameters
 

src/content/docs/setup/configuration/content-delivery-network.mdx

@@ -1,18 +1,27 @@
 ---
 title: Content delivery network (CDN)
-description: Learn how to configure a CDN for your Adobe Commerce on Edge Delivery Services storefront project.
+description: Learn how to configure a CDN for your Commerce Storefront powered by Edge Delivery Services.
 ---
 
+import Aside from '@components/Aside.astro';
 import Badge from '@components/overrides/Badge.astro';
 import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
 import Task from '@components/Task.astro';
 import Tasks from '@components/Tasks.astro';
 
-Decide early which CDN to use. A popular option is Fastly, which is included with your Adobe Commerce license.
+A CDN is a critical component of your Commerce Storefront. It is responsible for delivering content to your customers in the most efficient and secure way possible.
 
-<Badge tooltip="Applies to Adobe Commerce on Cloud projects (Adobe-managed PaaS infrastructure) and on-premises projects only." text="PaaS only" variant="note" href="https://experienceleague.adobe.com/en/docs/commerce/user-guides/product-solutions" />
+CDN features, usage, and provider details vary depending on your backend commerce implementation. By default, Adobe Commerce on Cloud projects use Fastly, while Adobe Commerce as a Cloud Service and Adobe Commerce Optimizer projects use a fully managed CDN service through [Adobe Experience Manager](https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/content-delivery/cdn).
 
-This page provides instructions and guidance for configuring Adobe Commerce with Fastly. It focuses on routing use cases, configuration, validation, and debugging.
+If necessary, you can configure your own CDN, also known as "Bring Your Own CDN" (BYO CDN). See [BYO CDN Setup](https://www.aem.live/docs/byo-cdn-setup) for required settings and vendor-specific setup instructions.
+
+<Aside type="note" title="Image optimization">
+Drop-in components automatically add image optimization parameters (such as width, height, and quality) to image URLs. CDN-based image optimization services rely on these parameters to optimize images. If you need to use different parameters or URL patterns for your CDN provider, you can override the defaults by using the [`setImageParamKeys`](/sdk/reference/initializer/#setimageparamkeysparams) method in the initializer configuration.
+</Aside>
+
+<Badge tooltip="Applies to Adobe Commerce on Cloud projects (Adobe-managed PaaS infrastructure) and on-premises projects only." text="PaaS only" variant="note" href="https://experienceleague.adobe.com/en/docs/commerce/user-guides/product-solutions" /> For Adobe Commerce on Cloud projects, Fastly is included with your Adobe Commerce license and is the default CDN provider. The [`fastly-magento2`](https://github.com/fastly/fastly-magento2) module exposes Fastly service configurations in the Commerce Admin.
+
+The remaining sections on this page provide instructions and guidance for configuring Adobe Commerce on Cloud projects with the Fastly module. It focuses on routing use cases, configuration, validation, and debugging.
 
 ## Routing