Image annotation combines the concepts of annotation layers, non-destructive editing, and visual communication principles to create an effective tool for conveying information through marked-up images.

Annotation layers are a fundamental concept in image editing where graphical elements are drawn on a separate layer above the original image rather than directly modifying the base pixels. This layered architecture, pioneered by Adobe Photoshop in the early 1990s, enables non-destructive editing where the original image data remains completely intact beneath the annotations. Each annotation (arrow, shape, text label) exists as an independent object on the overlay layer, which is composited with the base image only during final export. This approach allows annotations to be modified, moved, or deleted without affecting the underlying image, and it enables the same base image to have different sets of annotations for different purposes.

Non-destructive editing extends beyond layers to encompass any editing approach that preserves the original data. In annotation tools, this means the arrow you drew can be repositioned, the text you typed can be re-edited, and the highlight you placed can be recolored, all without any degradation to the source image. The undo/redo system maintains a history stack of annotation actions, allowing any change to be reversed. When the annotated image is finally exported as a flat PNG or JPG, the layers are composited (flattened) into a single image, permanently merging the annotations with the original content.

Visual communication principles from the field of information design inform effective annotation practices. Research in cognitive psychology has established that the human visual system processes images faster than text, and that combining visual cues with textual information significantly improves comprehension and retention. Arrows leverage the innate human ability to follow directional cues, guiding the viewer's eye to specific locations. Circles and rectangles create visual grouping through the Gestalt principle of enclosure, clearly defining which area is being referenced. Color coding uses the pre-attentive processing of color differences to create visual categories, with red typically indicating errors or warnings and green indicating correct or positive states. Contrast between annotation colors and the underlying image is essential for visibility, which is why annotation tools typically offer bright, saturated colors with optional outlines or shadows. These principles explain why annotated screenshots are dramatically more effective than written descriptions for communicating visual information like UI bugs, design feedback, and step-by-step instructions.