WIP Add documentation on how to scale and align graphics

doc.zih.tu-dresden.de/docs/contrib/content_rules.md

@@ -164,6 +164,55 @@ The `summary` and `align` parameters can be combined as well:
     Do not add large binary files or high-resolution images to the repository. See this valuable
     document for [image optimization](https://web.dev/fast/#optimize-your-images).
 
+#### Alignment and Sizing of Graphics
+
+!!! note "Scale graphics once"
+
+    Graphics and images should be added to the repository with the desired size. If you add a file
+    If you add a graphic that is too large, it is implicitly converted to a suitable size. This
+    conversion happens every time the documentation is built, i.e., every time the CI/CD pipeline is
+    run. Over the project's lifetime, this will happen many thousands of times.
+
+    While MkDocs scales images to fit the content width, it doesn’t compress images or reduce file
+    sizes automatically. Therefore, it’s still essential to optimize image sizes and resolutions
+    before uploading to ensure good performance.
+
+!!! example "Scale image to 150px width"
+
+    The following Markdown syntax will scale the image of the beautiful
+    [cluster `Barnard`](../jobs_and_resources/hardware_overview.md#barnard) to a width of 150
+    pixels and height of 150 pixels.
+
+    === "Scale"
+
+        ```markdown
+        ![Beauty Barnard](misc/barnard.jpeg){: style="height:150px;width:150px"}
+        ```
+
+        ![Beauty Barnard](misc/barnard.jpeg){: style="height:150px;width:150px"}
+
+    === "Align=center"
+
+        Now let's scale the very same image to 150 pixel width keeping aspect ratio and center align it.
+        ```markdown
+        ![Beauty Barnard](misc/barnard.jpeg){: style="height:150px;width:150px"}
+        {: align="center"}
+        ```
+
+        ![Beauty Barnard](misc/barnard.jpeg){: style="width:150px"}
+        {: align="center"}
+
+    === "Align=right"
+
+        Now let's scale the very same image to 150 pixel width keeping aspect ratio and center align it.
+        ```markdown
+        ![Beauty Barnard](misc/barnard.jpeg){: style="width:150px"}
+        {: align="right"}
+        ```
+
+        ![Alternative text](misc/barnard.jpeg){: style="width:150px"}
+        {: align="right"}
+
 #### Special Feature: Admonitions
 
 [Admonitions](https://squidfunk.github.io/mkdocs-material/reference/admonitions/), also known as