Working with Images
Add and manage images in your documentation with ezDoc's built-in image manager.
Inserting Images
Using the Insert Image Button
- Click the 🖼️ Insert Image button in the toolbar
- Choose between two tabs:
- Upload New - Add a new image
- From Library - Use an existing image
Upload New Image
- Click "Choose a file"
- Select an image from your computer
- See a preview
- Add alt text (required)
- Choose a display style
- Click "Insert Image"
From Library
- Browse existing images
- Use search to filter
- Click an image to select it
- Add alt text
- Choose display style
- Click "Insert Image"
Supported Formats
- JPG/JPEG
- PNG
- GIF
- SVG
- WebP
Display Styles
Simple Image
Basic image tag with no special styling.
Responsive (Full Width)
Image scales to container width.
Centered
Image centered on the page.
Rounded Corners
Image with rounded corners.
With Caption
Image with a caption below (figcaption).
16:9 Ratio Container
Image in a 16:9 aspect ratio container.
4:3 Ratio Container
Image in a 4:3 aspect ratio container.
Square Container
Image in a square container.
Avatar (Circular)
128x128 circular image, perfect for profile pictures.
Alt Text
Alt text is required for:
- Accessibility - Screen readers
- SEO - Search engines
- Fallback - When images don't load
Writing Good Alt Text
✅ Good:
- "Screenshot of the dashboard showing user statistics"
- "Diagram illustrating the authentication flow"
- "Logo of Company Name"
❌ Bad:
- "Image"
- "Screenshot"
- "Picture1.png"
Image Library
Viewing Images
The library shows all images in assets/images/ with:
- Thumbnail previews
- File names
- Search functionality
Reusing Images
Images uploaded once can be reused across multiple pages without re-uploading.
Managing Images
To delete images:
- Navigate to your project folder
- Open
assets/images/ - Delete unwanted files
Image Paths
Images use relative paths:
../assets/images/photo.jpg
This ensures images work in:
- The editor preview
- Exported documentation
- Any location
Best Practices
File Names
- Use descriptive names
- Avoid spaces (use hyphens)
- Keep names lowercase
- Example:
user-dashboard-screenshot.png
File Sizes
- Optimize images before uploading
- Use appropriate formats:
- Photos: JPG
- Graphics: PNG
- Icons: SVG
- Animations: GIF
Organization
- Store all images in
assets/images/ - Use subfolders for large projects
- Delete unused images
Accessibility
- Always provide alt text
- Make alt text descriptive
- Don't start with "Image of..."
Markdown Image Syntax
You can also use Markdown syntax:
HTML Image Syntax
Or use HTML for more control:
<img src="../assets/images/photo.jpg" alt="Description" class="is-rounded">
Image Galleries
Create image galleries using Bulma Elements:
- Click "Bulma Element"
- Select "Image Gallery (3 columns)"
- Replace placeholder images with your own
💡 Tip: Images are automatically copied when you export your documentation!