Image Editing Tools for Documentation

Image editing tools create and optimize screenshots, diagrams, and illustrations for documentation. Learn how to use GIMP, Figma, and ImageMagick for documentation images, and optimize them for web delivery.

What You'll Learn

You will learn how to create, edit, and optimize images for documentation, including screenshots, annotated diagrams, and illustrations.

Why It Matters

Images make documentation more engaging and easier to follow. Poor quality images (blurry, unoptimized, badly cropped) make documentation look unprofessional and slow down page load.

Real-World Use

DodaTech uses a combination of tools: Figma for illustrations and diagrams, Snagit for screenshots with annotations, and ImageMagick for batch optimization and conversion to WebP.

flowchart LR
  A[Create Image] --> B[Edit and Annotate]
  B --> C[Optimize for Web]
  C --> D[Convert to WebP]
  D --> E[Store in Static Folder]
  E --> F[Reference in Markdown]
  A:::current
  classDef current fill:#f90,color:#fff,stroke:#333,stroke-width:2px

Tool Comparison

Optimizing Images with ImageMagick

# Convert to WebP with quality 80
magick convert input.png -quality 80 output.webp

# Batch convert all PNGs to WebP
magick mogrify -format webp -quality 80 *.png

# Resize to max width 1200px
magick convert input.png -resize 1200x output.png

# Strip metadata to reduce file size
magick convert input.png -strip output.png

Screenshot Workflow

# 1. Capture screenshot (platform-specific)
# macOS: Cmd+Shift+4
# Windows: Win+Shift+S
# Linux: gnome-screenshot

# 2. Annotate with arrows and text (Figma or GIMP)

# 3. Optimize for web
magick convert screenshot.png \
  -strip \
  -resize 800x \
  -quality 80 \
  -sharpen 0x1 \
  screenshot.webp

# Expected file size reduction: 70-90%

Adding Alt Text

![Durga Antivirus Pro dashboard showing threat detection metrics,
including total threats detected, active quarantines, and real-time
scan status with a highlighted alerts section.](/images/dashboard.webp)

Image Storage Structure

static/
  images/
    docs/
      getting-started/
        installation-step-1.webp
        installation-step-2.webp
      api/
        authentication-flow.webp
        dashboard-overview.webp

Common Mistakes

1. Using Screenshots Instead of Live Examples

Screenshots become outdated when the UI changes. Prefer live examples or Mermaid diagrams when possible.

2. Uploading Uncompressed Images

Direct camera or screenshot output is too large for web. Always optimize and compress before uploading.

3. No Alt Text

Images without alt text fail Accessibility requirements. Every documentation image needs descriptive alt text.

4. Inconsistent Image Styles

Images with different borders, shadows, and annotation styles look unprofessional. Define a consistent style.

5. Referencing Local File Paths

Images must be referenced with paths that work after building. Use paths relative to the static folder or site root.

Practice Questions

1. Why should images be converted to WebP format?

WebP provides 25-35 percent smaller file sizes than PNG or JPEG at the same quality, improving page load speed.

2. What is the purpose of alt text in documentation images?

Alt text provides descriptions for screen readers, displays when images fail to load, and improves SEO.

3. How does ImageMagick help with documentation image management?

It enables batch conversion, resizing, compression, and format conversion through command-line automation.

4. Why should you avoid heavy image optimization tools for screenshots?

Over-optimization can make text in screenshots unreadable. Use quality 80-85 for screenshots with text.

5. Challenge: Take a screenshot of a software interface, annotate it with Figma or GIMP, optimize it with ImageMagick, convert to WebP, and reference it in a documentation page with proper alt text.

FAQ

Mini Project

Create a documentation image workflow: capture a screenshot, annotate it with Figma or GIMP, optimize it with ImageMagick (convert to WebP, resize, strip metadata), store it in the images directory, and reference it in a Markdown page with proper alt text.

What's Next

After images, explore Screen Capture tools like Snagit and OBS for creating video content. Then learn about Localization Tools.