Images & Media

Basic Images

Use standard Markdown syntax to embed images. We recommend storing images in your assets/images/ folder.

![Alt Text](../../assets/images/screenshot.png "Optional Title")

Image Styling

You can add classes to images using the attribute syntax { .class } after the image.

Sizing

![Small](../../assets/icon.png){ .size-small }
![Medium](../../assets/preview.png){ .size-medium }
![Large](../../assets/banner.png){ .size-large }

Alignment

![Centered](../../assets/img.png){ .align-center }
![Right](../../assets/img.png){ .align-right }

Shadows & Borders

![Styled](../../assets/img.png){ .with-shadow .with-border }

preview with styling

Responsive Images

All images in docmd are responsive by default, automatically scaling to fit their container.

Image Captions

Add captions to your images using the figure syntax:

<figure>
  <img src="/path/to/image.jpg" alt="Description of image">
  <figcaption>This is the caption for the image</figcaption>
</figure>

Image Galleries and Lightbox

docmd includes built-in lightbox functionality for image galleries. When users click on an image in a gallery, it opens in a full-screen lightbox view.

Image Galleries

You can group multiple images into a responsive grid using the image-gallery class, use figcaption for image captioning. This requires raw HTML wrapping.

<div class="image-gallery">
  <figure>
    <img src="../../assets/img1.jpg" alt="View 1">
    <figcaption>Dashboard View</figcaption>
  </figure>
  <figure>
    <img src="../../assets/img2.jpg" alt="View 2">
    <figcaption>Settings View</figcaption>
  </figure>
</div>
Feature 1
Feature One
Feature 2
Feature Two

If mainScripts is enabled (default), clicking any image in a gallery or any image with the .lightbox class will open a full-screen zoom view.

![Click to Zoom](../../assets/diagram.png){ .lightbox }

Image Optimization Best Practices

For optimal performance:

  1. Use appropriate formats:

    • JPEG for photographs
    • PNG for images with transparency
    • SVG for icons and logos
    • WebP for better compression (with fallbacks)

  2. Optimize file sizes:

    • Compress images before adding them to your documentation
    • Consider using tools like ImageOptim, TinyPNG, or Squoosh

  3. Provide responsive images:

    • Use the HTML <picture> element for advanced responsive image scenarios

  4. Specify dimensions:

    • Always include width and height attributes to prevent layout shifts
PreviousCode NextLinking