docmd uses standard Markdown image syntax. Centralise media assets within the assets/ directory in your project root for consistent path references.

![Alt text](/assets/images/architecture.png "Optional tooltip title")

Image Sizing Classes

Apply explicit sizing using attribute class notation { }:

![Small icon preview](/assets/icon.png){ .size-small }
![Standard UI view](/assets/preview.png){ .size-medium }
![Full-width layout banner](/assets/banner.png){ .size-large }

Alignment & Styling Attributes

Combine alignment and visual decoration classes in a single attribute block:

![Centred architectural diagram](/assets/img.png){ .align-centre }
![Right-aligned preview with shadow](/assets/img.png){ .align-right .with-shadow .with-border }

HTML5 Figure Captions

Use standard HTML5 <figure> and <figcaption> elements for accessible image captions:

<figure>
  <img src="/assets/diagram.png" alt="Cloud Infrastructure Architecture">
  <figcaption>Figure 1.1: Multi-Region Cloud Deployment Architecture.</figcaption>
</figure>

Responsive Image Galleries

Wrap multiple <figure> components in a div.image-gallery container to render responsive media grids:

<div class="image-gallery">
  <figure>
    <img src="/assets/screen1.jpg" alt="Dashboard Analytics Screen">
    <figcaption>Real-Time Performance Dashboard</figcaption>
  </figure>
  <figure>
    <img src="/assets/screen2.jpg" alt="Configuration Panel Screen">
    <figcaption>Global Settings Interface</figcaption>
  </figure>
</div>

Lightbox Zoom Overlays

When client scripts are active, docmd automatically attaches full-screen lightbox zoom behaviour to images tagged with .lightbox or nested within .image-gallery containers:

![System schematic preview](/assets/sample.png){ .lightbox }