Images
DocsForge handles images with enhanced styling options.
Basic image
Standard Markdown syntax:
Image with caption
Use figure markup for captions:
<figure markdown="span">
<figcaption>Documentation site preview</figcaption>
</figure>
Image alignment
Left aligned
{ align=left }
Right aligned
{ align=right }
Center aligned
{ align=center }
Image size
Set width and height:
{ width="300" }
{ width="50%" }
Lazy loading
Images load lazily by default. To disable for above-the-fold images:
{ loading=eager }
Shadow
Add a shadow effect:
{ .shadow }
Linking images
Make an image a link:
[](https://example.com)
Responsive images
DocsForge automatically makes images responsive. They scale to fit their container and don't overflow.
Image formats
Recommended formats:
| Format | Use case |
|---|---|
| PNG | Screenshots, diagrams with transparency |
| JPEG | Photos, complex images |
| WebP | All of the above (smaller file size) |
| SVG | Icons, logos, simple diagrams |
Optimization tips
- Use WebP when possible (smaller than PNG/JPEG)
- Compress images before adding to docs
- Use SVG for logos and icons
- Keep images under 200KB when possible
- Use descriptive alt text for accessibility