What this tool does

Highlight an area with a clear rectangle or ellipse

Image Annotation Online adds one rectangle or ellipse to a screenshot, product photo, or other picture. Draw the outline, adjust its position, dimensions, line size, color, and opacity, then review the marked image. The browser produces a new export and leaves your source file unchanged.

Use a shape when a reader needs to notice a specific region. Choose Arrow for direction or Add Text to Image for a label; annotations are flattened into the saved copy rather than stored as editable layers.

Features of image annotation online

• Rectangle and ellipse annotation tools. Choose a geometric outline that frames an area or calls attention to a specific detail.
• Interactive placement. Drag over the canvas to draw a shape, then refine where it sits and how much of the image it covers.
• Line and appearance controls. Set line size, color, and opacity so the annotation is visible without hiding important content.
• Dimension controls. Adjust the annotation bounds and position when the first drag needs more precise alignment.
• Undo support. Reverse the latest edit and redraw a misplaced shape before exporting the final image.
• Local file export. Save PNG, JPG, WebP, or PDF from the browser without replacing or uploading the original.

Annotate an image with a rectangle or ellipse

Choose Rectangle to outline a region with straight edges or Ellipse to surround a point without sharp corners. Drag on the canvas to set the bounds, then refine the position, width, height, line size, color, and opacity in the settings. This image annotation tool handles one shape at a time, keeping a quick markup workflow straightforward.

A rectangle annotation works well for a control panel, product label, or area of a diagram. An ellipse annotation is useful when the exact shape of a button or object matters more than a box around it. Keep the outline close to the target but leave a little margin so it frames rather than touches the content.

Mark screenshots and product photos for clear instructions

A support screenshot often needs a visible image annotation around the button or menu that a reader should find. A marketplace review can use a shape to point out a product detail, although annotations should not obscure the product or misrepresent its condition. In a diagram, outline the relevant box or region and add written explanation in the surrounding document.

For a clear annotation, use a color that contrasts with the background and a line weight that remains visible when the image is viewed at its final size. Red is recognizable as a highlight, but it may blend into a warm photo; test another color if necessary. Keep related screenshots consistent by using a similar outline size and placement.

Set annotation size, position, and opacity precisely

The drag gesture establishes an initial annotation, while the percentage controls make it easier to fine tune its center and dimensions. Widen a rectangle to cover a row of controls or reduce its height to frame one line. Change opacity when an outline feels too strong, but avoid lowering it until the shape nearly disappears against a complex image.

Inspect the annotation corners and edges before saving. A shape placed too close to an image boundary can be partly clipped in another display or after a later crop. If you change the source dimensions, revisit the annotation because its coordinates and line weight are applied to the current output canvas.

Choose between image annotation, arrows, and text labels

Use a rectangle or ellipse annotation when the important information is already visible and only needs emphasis. Use an Arrow when a reader must understand direction or a relationship between two points. Add Text to Image when the picture needs a short label. Several distinct instructions may be clearer as a numbered-step image than as overlapping outlines.

The shape tool does not maintain a stack of independently editable objects. These annotation settings are applied to the export, and another shape action replaces the shape being edited. For multi-region diagrams, separate layers, connectors, or repeatable styling, use a dedicated annotation application and save its project file as well as an image.

Export and review an annotated image

Review the complete image and make sure the annotation marks the intended target rather than a nearby object. The new file is flattened; the original remains unchanged. Save a separate copy if the image may later need another shape, and avoid replacing the only clean source with markup baked into its pixels.

PNG is useful for screenshots with sharp edges and can preserve transparency. WebP also supports transparency and may create a smaller web file. JPG is common for photos but flattens transparent areas to white. PDF places one image on a white page. Use the file type requested by the next workflow and verify the download before sharing it.

If an annotation will be reused in a presentation or knowledge base, compare its exported scale with the surrounding images so the line weight feels consistent. A bright outline can dominate a small thumbnail even when it looks restrained in the editor. When accuracy matters, retain a clean source and document what the outline is intended to identify.

How to use it

How to annotate a screenshot or image with a shape

1. Open a screenshot or photo from your device, paste an image, or enter a direct URL that is accessible to the browser.
2. Select Rectangle or Ellipse based on the area you want to frame, then drag over the image to draw an outline.
3. Set annotation color, line size, opacity, position, width, and height until the target is marked clearly.
4. Check that the outline does not cover text or product details and remains visible at the image’s final display size.
5. Use Undo and redraw if the shape is misplaced. Choose an output format and save a separate marked copy.
6. Open the exported file once to confirm the annotation and dimensions before adding it to a guide or message.

Common questions

Image Annotation Online FAQ

Keep editing

Related PhotoSaver tools