Images

Adding Images

Use standard Markdown syntax:

![Screenshot of the dashboard](images/dashboard.png)

Auto-Zoom Thumbnails

By default, images are displayed as clickable thumbnails:

Default behavior:

• Thumbnail display at reduced size
• Click-to-zoom lightbox overlay
• Smooth zoom animation

![inline](./images/icon.png)

Automatic WebP Conversion

All images are automatically converted to WebP format during the build for better performance.

Benefits:

• Smaller files: WebP is typically 25-35% smaller than JPEG/PNG
• Better Lighthouse scores: Faster page loads improve performance metrics
• Automatic fallback: Browsers without WebP support use the original

No configuration required - conversion is automatic.

Image Validation

The build fails if a referenced image does not exist, catching broken image links early.

Best Practices

• Use descriptive alt text for accessibility
• Place images in src/site/resources/images/
• Use inline for icons and badges (under 50px)
• Use zoom (default) for screenshots and diagrams
• Prefer PNG for diagrams, JPG for photos

Next Steps

• Code Highlighting^[1] - Format code blocks
• UI Components^[2] - Tabs and accordions
• Doxia Features^[3] - Advanced macros