{{ summaryTitle }}
{{ summaryValue }}

{{ summaryLine }}

Image{{ imageDimensionLabel }} Selected tool{{ annotationTypeLabel(params.annotation_tool) }} Export{{ exportDimensionLabel }}
{{ fileBusy ? 'Opening image locally' : sourceName }}
Drop one image or press to browse. Choosing a file replaces the sample and clears its layers.
{{ fileError || 'PNG, JPEG, and WebP are supported.' }}
The selected tool controls the next mark without changing existing layers.
Annotation workspace
Drag to draw · Arrow keys move · Shift + arrow resizes
The neutral default is 1×. Export scale does not alter the source image or layer geometry.

The chart renderer is unavailable. The same counts remain available in the layer ledger.

LayerTypeStylePlacementCopy
{{ row.layer }}{{ row.type }}{{ row.style }}{{ row.placement }}
Image Cropper Crop one image locally with exact aspect and pixel controls, then review upscaling and transparency along with quality or file-budget risks.
Image Resizer Resize one image locally, compare fit or crop geometry, and tune format quality against a file-size target before downloading.
Image Compressor Compress one image locally in your browser, compare size and visual quality, then download a resized or reformatted copy with metadata controls.
Image Metadata Stripper Strip hidden metadata from an image in your browser and create a clean JPEG, PNG, or WebP copy with a check for remaining privacy markers.

An annotation directs attention without changing the underlying subject of an image. Arrows show direction or connection, rectangles isolate a boundary, highlights cover an area, and text callouts explain what the viewer should notice. The useful mark is specific enough to guide the eye but restrained enough that the original image remains readable.

Annotations are usually arranged as layers. A later layer appears above an earlier one, so order matters when marks overlap. Color and stroke width affect contrast, while placement affects meaning: a slightly misplaced arrow can point to the wrong control, and a broad highlight can hide the detail it is supposed to emphasize.

  • Arrows connect a note to a precise point or show movement.
  • Rectangles frame a region without covering its interior.
  • Highlights tint an area and work best when the source remains visible beneath it.
  • Text callouts keep a short explanation with the marked region.

Resolution and canvas size are separate from the annotation layout. A mark can be stored relative to the image edges and then drawn at different output dimensions. Doubling the export dimensions increases the number of pixels, but it does not reveal detail that was absent from the source image.

Before sending an annotated image, check the full composition at its intended viewing size. Confirm that marks do not cover names, account details, or other sensitive content, and remove source metadata separately if privacy requires it.

How to Use This Tool:

Choose the image first; loading a different file clears the current annotation layers.

  1. Drop or browse for one PNG, JPEG, or WebP image. Keep it at 10 MB or less, no more than 5,000 pixels on either side, and no more than 12 megapixels.
  2. Choose an Annotation tool, color, and stroke width. For a text callout, enter up to 120 characters before placing the mark.
  3. Drag on the Annotation workspace to draw. Use Add to center for keyboard-friendly placement, then select a layer to move, resize, reorder, or delete it.
  4. Use Undo and Redo while refining the composition. Existing layers keep their own color and stroke when the controls change.
  5. Review the Annotated image at 1× first. Choose 2× export only when a larger pixel canvas is useful for the handoff.

Interpreting Results:

Judge the final image by clarity, not by the number of layers. Every arrow should have an unmistakable target, every rectangle should contain the intended region, and every callout should remain legible at the size where the image will be viewed.

Type mix summarizes how many arrows, rectangles, highlights, and text callouts are present. It can reveal an annotation-heavy composition, but it is not a quality score. Use the Layer ledger to check stacking order, style, and placement when overlapping marks make the image difficult to read.

  • Move a layer forward when it is hidden by a later mark; move it backward when it covers something more important.
  • Increase stroke width for a larger output only if the mark becomes hard to see.
  • Check transparent source areas carefully; annotated outputs place them on a white background.

Technical Details:

Each annotation stores its type, color, stroke width, optional text, and two points as fractions of the source width and height. Coordinates run from 0 at the left or top edge to 1 at the right or bottom edge. This normalized geometry keeps a layer in the same relative position when the raster is rendered at 1× or 2×.

Formula Core:

Export scale multiplies both source dimensions. It does not change the layer coordinates or the source image’s detail.

Wout = Wsource×s Hout = Hsource×s

W and H are pixel dimensions, and s is exactly 1 or 2. A 1,600 × 900 source exported at 2× becomes 3,200 × 1,800 pixels. Dimensions are whole pixels; no further rounding is needed.

Mechanism Core:

Property Allowed value Effect
Layer typeArrow, rectangle, highlight, or text calloutChooses how the two stored points are drawn.
Stroke2, 4, 6, 8, or 12 source-image pixelsSets line weight for that layer.
Coordinates0 to 1 inclusivePlaces each endpoint relative to the source image.
Text1 to 120 characters for a text calloutSupplies the callout label.
CompositionUp to 100 layersDefines the ordered drawing stack and type counts.
Edit historyMost recent 50 committed changesBounds how far undo can travel.

The layer order is the drawing order: later layers appear over earlier ones. The ledger’s placement is the midpoint of a layer’s two points, rounded to a whole percentage across and down. Type counts are simple layer counts; ties favor the first type in the fixed order of arrow, rectangle, highlight, then text.

The annotated raster is deterministic for the same decoded source image, ordered layers, and export scale. Browser image decoding and output compression can still make file bytes differ across formats.

Privacy and Limits:

The selected image is decoded and edited in the current browser tab; it is not uploaded for annotation. Closing or reloading the page ends the working session, so download the finished image before leaving.

  • Only PNG, JPEG, and WebP source files are accepted; SVG and active document formats are rejected.
  • A 2× export enlarges the raster canvas but cannot restore missing focus, texture, or source resolution.
  • Transparent source pixels are flattened onto white in every annotated output.
  • Annotations do not redact content. A highlight, rectangle, or callout may leave sensitive pixels recoverable in the exported image.
  • Image metadata is a separate concern; remove it with a metadata tool when the final file must not retain camera or location details.