docs: add docs for transform property in built-in loaders

adev/src/content/guide/image-optimization.md

@@ -369,6 +369,40 @@ There is an additional attribute supported by the `NgOptimizedImage` directive,
 
 A common use for `loaderParams` is controlling advanced image CDN features.
 
+### Using the `transform` property with built-in loaders
+
+The built-in loaders for Cloudinary, Cloudflare, ImageKit, and Imgix support a special `transform` property within `loaderParams`. This property allows you to apply custom image transformations provided by your CDN.
+
+The `transform` property accepts two formats:
+
+#### String format
+
+Provide transformations as a comma-separated string using your CDN's transformation syntax:
+
+```html
+<img
+  ngSrc="my-image.jpg"
+  width="400"
+  height="300"
+  [loaderParams]="{transform: 'e_grayscale,r_10'}"
+/>
+```
+
+#### Object format
+
+Provide transformations as an object with key-value pairs.
+
+```html
+<img
+  ngSrc="my-image.jpg"
+  width="400"
+  height="300"
+  [loaderParams]="{transform: {e: 'grayscale', r: 10}}"
+/>
+```
+
+NOTE: The `transform` property is not supported by the Netlify loader, as Netlify's image CDN does not provide custom transformation parameters.
+
 ### Example custom loader
 
 The following shows an example of a custom loader function. This example function concatenates `src` and `width`, and uses `loaderParams` to control a custom CDN feature for rounded corners:

packages/common/src/directives/ng_optimized_image/image_loaders/cloudflare_loader.ts

@@ -20,6 +20,7 @@ import {normalizeLoaderTransform} from './normalized_options';
  * @param path Your domain name, e.g. https://mysite.com
  * @returns Provider that provides an ImageLoader function
  *
+ * @see [Image Optimization Guide](guide/image-optimization)
  * @publicApi
  */
 export const provideCloudflareLoader: (path: string) => Provider[] = createImageLoader(

packages/common/src/directives/ng_optimized_image/image_loaders/cloudinary_loader.ts

@@ -36,6 +36,7 @@ function isCloudinaryUrl(url: string): boolean {
  * https://subdomain.mysite.com
  * @returns Set of providers to configure the Cloudinary loader.
  *
+ * @see [Image Optimization Guide](guide/image-optimization)
  * @publicApi
  */
 export const provideCloudinaryLoader: (path: string) => Provider[] = createImageLoader(

packages/common/src/directives/ng_optimized_image/image_loaders/imagekit_loader.ts

@@ -36,6 +36,7 @@ function isImageKitUrl(url: string): boolean {
  * https://subdomain.mysite.com
  * @returns Set of providers to configure the ImageKit loader.
  *
+ * @see [Image Optimization Guide](guide/image-optimization)
  * @publicApi
  */
 export const provideImageKitLoader: (path: string) => Provider[] = createImageLoader(

packages/common/src/directives/ng_optimized_image/image_loaders/imgix_loader.ts

@@ -34,6 +34,7 @@ function isImgixUrl(url: string): boolean {
  * e.g. https://somepath.imgix.net or https://images.mysite.com
  * @returns Set of providers to configure the Imgix loader.
  *
+ * @see [Image Optimization Guide](guide/image-optimization)
  * @publicApi
  */
 export const provideImgixLoader: (path: string) => Provider[] = createImageLoader(