From 700812236eca5aa436f4bb6f80896716bf1e3109 Mon Sep 17 00:00:00 2001
From: xelaint <xelaint@gmail.com>
Date: Tue, 26 May 2026 15:02:23 +0800
Subject: [PATCH] docs(design): clean up image documentation

---
 .../basic-image/basic-image.component.html    |  4 +--
 .../skeleton-image.component.html             |  4 +--
 libs/design/image/README.md                   | 35 ++++---------------
 3 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/libs/design-examples/image/src/basic-image/basic-image.component.html b/libs/design-examples/image/src/basic-image/basic-image.component.html
index b8475ad461..0c611c1faf 100644
--- a/libs/design-examples/image/src/basic-image/basic-image.component.html
+++ b/libs/design-examples/image/src/basic-image/basic-image.component.html
@@ -1,7 +1,7 @@
 <daff-image
   src="https://assets.daff.io/ergonomic_bronze_pants.png"
   alt="Ergonomic Bronze Pants T-Shirt"
-  [width]="934"
-  [height]="934"
+  [width]="400"
+  [height]="400"
 >
 </daff-image>
diff --git a/libs/design-examples/image/src/skeleton-image/skeleton-image.component.html b/libs/design-examples/image/src/skeleton-image/skeleton-image.component.html
index 4f8300b872..3a634ff152 100644
--- a/libs/design-examples/image/src/skeleton-image/skeleton-image.component.html
+++ b/libs/design-examples/image/src/skeleton-image/skeleton-image.component.html
@@ -2,7 +2,7 @@
   [skeleton]="true"
   src="https://assets.daff.io/ergonomic_bronze_pants.png"
   alt="Ergonomic Bronze Pants T-Shirt"
-  [width]="934"
-  [height]="934"
+  [width]="300"
+  [height]="300"
 >
 </daff-image>
diff --git a/libs/design/image/README.md b/libs/design/image/README.md
index 328438ab75..077c1b696c 100644
--- a/libs/design/image/README.md
+++ b/libs/design/image/README.md
@@ -12,8 +12,7 @@ Image builds on Angular's [`NgOptimizedImage`](https://angular.dev/guide/image-o
 
 ## Usage
 
-### Within a standalone component
-To use image in a standalone component, import `DAFF_IMAGE_COMPONENTS` directly into your custom component:
+Import `DAFF_IMAGE_COMPONENTS` into your component:
 
 ```ts
 import { Component } from '@angular/core';
@@ -29,31 +28,9 @@ import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';
 export class CustomComponent {}
 ```
 
-### Within a module (deprecated)
-To use image in a module, import `DaffImageModule` into your custom module:
-
-```ts
-import { NgModule } from '@angular/core';
-import { DaffImageModule } from '@daffodil/design/image';
-import { CustomComponent } from './custom.component';
-
-@NgModule({
-  declarations: [
-    CustomComponent,
-  ],
-  exports: [
-    CustomComponent,
-  ],
-  imports: [
-    DaffImageModule,
-  ],
-})
-export class CustomComponentModule { }
-```
-
-> **Warning**
->
-> This method is deprecated. It's recommended to update all custom components to standalone.
+> **Deprecation notice:**
+> 
+> `DaffImageModule` is deprecated. Use the standalone component imports instead.
 
 ## Required attributes
 All four of the following attributes are required and will throw an error if missing:
@@ -67,12 +44,12 @@ All four of the following attributes are required and will throw an error if mis
 
 ## Features
 
-## Skeleton screen
+### Skeleton screen
 Use the `skeleton` property to display a placeholder skeleton screen that helps reduce load-time frustration.
 
 <daff-docs-example-viewer example="skeleton-image"></daff-docs-example-viewer>
 
-## Priority loading
+### Priority loading
 Use the `priority` property to mark an image as a priority for loading. Priority images are loaded eagerly and not lazy-loaded.
 
 ## Accessibility