Annotate an Image Online
Add arrows, boxes, circles, text labels, highlights or blur to an image. Review your annotations and download the marked-up result. All processing happens locally in your browser.
Annotate an Image Online
Drag and drop your JPG, PNG, or WebP image here, or click Browse Files to start marking up.
Your selected image is processed inside your browser.
The selected image is not uploaded to TryFormatter for processing.
What Is an Image Annotator?
An image annotator lets you add arrows, lines, shapes, text labels, highlights, freehand marks, or blur effects to a photo, screenshot, or graphic. It helps explain visual information without requiring a complete photo-editing application.
You can use annotations to point out a button in a screenshot, mark a product feature, add feedback to a design, highlight part of a chart, or hide information before sharing an image.
How to Annotate an Image
- Choose an image: Drag a JPG, PNG, or WebP file into the workspace or select Browse Files.
- Select an annotation tool: Choose an arrow, line, rectangle, circle, freehand pen, text label, highlight, or blur tool.
- Adjust the settings: Select the colour, line thickness, opacity, font size, or blur strength available for the chosen tool.
- Add the annotation: Click and drag across the image preview to draw, highlight, label, or blur the required area.
- Review your changes: Move or remove annotations where supported, and use Undo or Redo to correct recent changes.
- Download the result: Choose JPG, PNG, or WebP and select Download Annotated Image.
Using Arrows, Lines, and Shapes
Arrows and shapes help direct attention to a specific part of an image. Choose a colour and thickness that can be seen clearly against the background.
Arrows
Point to a button, form field, error message, product feature, or other detail that requires attention.
Straight Lines
Connect related areas, underline content, divide sections, or show a simple direction or measurement.
Rectangles and Circles
Frame a complete section or draw attention to a smaller object without covering the content inside it.
Freehand Drawing
Sketch a quick note, underline irregular content, circle an area manually, or add a simple handwritten mark.
Avoid adding too many shapes to one image. A few clear annotations are usually easier to understand than several overlapping marks.
Adding Text Labels
Text labels provide context that an arrow or shape cannot explain by itself. You can use a short label to name a feature, describe a problem, number a step, or add a brief instruction.
- Keep labels short: Use direct words or one short sentence where possible.
- Use readable colours: Choose text that contrasts with the image behind it.
- Place labels near the subject: Keep the connection between the text and marked area easy to understand.
- Avoid covering important details: Move the label beside the relevant area instead of placing it directly over useful content.
- Check the final size: Text that looks clear in a large editor may appear small when the image is shared as a thumbnail.
Highlighting Important Areas
The highlight tool places a partly transparent colour over an area while allowing the original content to remain visible. It is useful for drawing attention to text, interface controls, table rows, or parts of a diagram.
Use highlights sparingly. Large or heavily coloured areas can make the original image harder to read. Select a colour and opacity that draws attention without hiding the content underneath.
Blurring or Covering Private Information
Blur or pixelation can make names, email addresses, phone numbers, account details, or other information more difficult to read before an image is shared.
After downloading the image, open the saved file and zoom in to confirm that the private information is no longer readable. Do not rely only on the editor preview.
Annotating Screenshots for Bug Reports
Annotations can make software bug reports easier to understand by showing the exact location and sequence of a problem.
- Mark the problem: Place a rectangle or circle around the incorrect button, message, alignment, or page element.
- Show the expected action: Use an arrow to point toward the control that should be selected.
- Add step numbers: Use short labels such as 1, 2, and 3 to explain the order of actions.
- Remove private details: Cover account names, email addresses, tokens, internal URLs, and other information that should not appear in an issue tracker.
- Keep the image focused: Crop unrelated areas before annotation when they do not help explain the problem.
Examples and Use Cases for Annotations
Step-by-Step Guides
Add arrows and numbered labels to show where readers should click, type, or look.
Customer Support
Point to settings, menus, buttons, or form fields when explaining how to complete a task.
Design Reviews
Mark spacing, alignment, colour, text, or layout issues directly on a design preview.
Product Explanations
Highlight controls, ports, components, dimensions, or features on a product image.
Teaching Materials
Circle important information, label parts of a diagram, or highlight a section of a chart.
JPG, PNG, and WebP Output
Choose an output format based on the type of image and where you plan to use it.
- PNG: Suitable for screenshots, diagrams, interface images, and annotations with sharp text or transparent areas.
- JPG and JPEG: Suitable for photographs and images that do not require transparency. Adjusting quality may affect both file size and image appearance.
- WebP: Suitable for web use and can support both photographic images and transparent areas.
Annotation normally keeps the original image dimensions unless the workspace provides and applies a separate resize option. Changing the output format can still affect file size, transparency, and compression.
Browser Processing and Privacy
The selected image is processed inside the browser workspace while you draw annotations, add labels, apply highlights, or prepare the output file.
Processing time depends on the image dimensions, number of annotations, blur area, output format, browser, and available device memory. Very large images or several blur regions may take longer to preview and export.
Related Image Tools
Frequently Asked Questions
How do I annotate an image online?
Choose a JPG, PNG, or WebP image, select an annotation tool, add your marks to the preview, review the result, and download the annotated image.
Which annotation tools are available?
The workspace can include arrows, straight lines, rectangles, circles, freehand drawing, text labels, highlights, and blur or pixelation tools.
Can I add arrows and text labels?
Yes. You can use arrows to point toward important areas and add short text labels to explain steps, features, errors, or feedback.
Can I blur private information?
You can use blur or pixelation to make information harder to read. For highly sensitive details, use a fully opaque shape and check the downloaded image before sharing it.
Can I undo an annotation?
Yes. Use Undo to reverse recent annotation actions and Redo to restore them. You can also remove selected annotations or clear the workspace when those controls are available.
Which image formats are supported?
You can use JPG, JPEG, PNG, and WebP images. The annotated result can be exported in the output formats supported by the workspace.
Does annotation change the image dimensions?
Annotation normally keeps the original pixel dimensions. The file size or transparency may still change when you select a different output format or quality setting.
Is my image uploaded to a server?
The selected image is processed inside the browser workspace. Publish a stronger no-upload statement only after confirming the production network behaviour.