feat: added more info on the raster component

Author: gerardnico

apps/site/pages/components/raster.md

@@ -3,10 +3,33 @@ title: Raster
 ---
 
 
+The image component permits to transform, render and supports multiple screen (responsive image).
+It's backed up by a image processing service for on the fly transformation.
+
+## Features
+
+* No image stretch: final width and height values never go above the image intrinsic size.
+* [Ratio property support](#dimension-properties)
+* [Crop support with fit attribute](#dimension-properties)
+* Automatic [compression](#compression-properties)
+* Responsive by default
+* [Fallback image](#image-component-error)
+
+## Syntax
+
+```markdown
+<Raster src="card_puncher_data_processing.jpg" alt="Card Puncher" height="300" ratio="16:9"/>
+```
+
+will output:
+
 <Raster src="card_puncher_data_processing.jpg" alt="Card Puncher" height="300" ratio="16:9"/>
 
+### Properties
 
-## Raster Component
+You will fine all possible properties below.
+
+##### Dimension Properties
 
 | Name   | Default | Possible values  | Description                                                    |
 |--------|---------|------------------|----------------------------------------------------------------|
@@ -15,7 +38,7 @@ title: Raster
 | Height |         | Postiive Integer | The requested height in pixel                                  |
 | Ratio  |         | `number:number`  | The requested ratio (Most common: `21:9`,`16:9`, `4:3`, `1:1`) |
 
-## Transformation Properties
+##### Transformation Properties
 
 | Name        | Default | Possible values                                 | Description                                                  |
 |-------------|---------|-------------------------------------------------|--------------------------------------------------------------|
@@ -27,14 +50,15 @@ More:
 * A `fluid` image will scale down to fit the container, maintaining the aspect ratio.
 * [Fit explanation](https://sharp.pixelplumbing.com/api-resize/#resize)
 
-## Features
+#### Compression Properties
 
-* No image stretch: final width and height values never go above the image intrinsic size.
-* Automatic compression
-* Responsive by default
-* Ratio support
-* Fallback image
-* Crop support with fit attribute
+| Level | Quality Level | Description                                                                                          |
+|-------|---------------|------------------------------------------------------------------------------------------------------|
+| none  |               | No compression applied; original image data is preserved exactly as-is                               |
+| low   | 90            | Minimal compression with negligible quality loss; best for archival or print use                     |
+| mid   | 80            | Balanced compression reducing file size by ~50% with minimal visible quality impact                  |
+| high  | 60            | Aggressive compression prioritizing small file size over image fidelity                              |
+| max   | 40            | Maximum compression; significantly reduced quality, optimized for bandwidth-constrained environments |
 
 ## Error handling
 
@@ -56,7 +80,6 @@ width="-1"
 />
 ```
 
-
 ### Transformation Service Error
 
 In case of error, the transformation service will:
@@ -81,12 +104,3 @@ You can enable DPI correction for responsive image.
 This can be disturbing when debugging responsive sizing image
 If you want also to use less bandwidth, this is also useful.
 
-## Compression
-
-| Level | Quality Level | Description                                                                                          |
-|-------|---------------|------------------------------------------------------------------------------------------------------|
-| none  |               | No compression applied; original image data is preserved exactly as-is                               |
-| low   | 90            | Minimal compression with negligible quality loss; best for archival or print use                     |
-| mid   | 80            | Balanced compression reducing file size by ~50% with minimal visible quality impact                  |
-| high  | 60            | Aggressive compression prioritizing small file size over image fidelity                              |
-| max   | 40            | Maximum compression; significantly reduced quality, optimized for bandwidth-constrained environments |