Annotate Images Online — Arrows, Text, and Markup Without Installing Anything
You're looking at a screenshot and something's wrong. You need to point at the thing that's wrong, say what's wrong with it, and send that to someone. That's annotation — and you don't need Photoshop for it.
Image annotation is the act of drawing on top of a picture to communicate something about it. An arrow pointing at a button that doesn't work. A rectangle around a section of a design that needs to change. A text label explaining what should happen. It's the visual equivalent of saying "look here" — and it saves more words than almost any other communication tool.
Try it free: Image Annotator — Add arrows, text, and highlights to any image. Runs in your browser, no signup needed.
The Image Annotator gives you seven drawing tools in the browser: arrows, rectangles, circles, lines, freehand pen, highlighter, and text. Upload any image, draw on it, download the result at full resolution. No software to install, no account to create, no upload to a server.
Seven Tools and When to Use Each One
Arrows are the most-used annotation tool for a reason — they say "look at this specific thing" without ambiguity. Use them for bug reports (arrow pointing at the broken element), design feedback (arrow from a comment to the element it refers to), and step-by-step instructions (arrow showing where to click). One arrow per point. If you need more than three arrows on a single screenshot, consider cropping to a smaller area instead.
Rectangles highlight regions. Draw a red rectangle around the area of interest to give it visual prominence. Good for calling out a section of a dashboard, a paragraph in a document, or a cluster of UI elements. Don't box every element individually — use one rectangle for the group.
Circles work like rectangles but draw attention more tightly. Use them for single buttons, icons, or small text. A circle around a typo in a design mockup communicates the issue immediately. The annotator draws ellipses — drag to create any oval shape, not just perfect circles.
Lines connect two points. Use them to show relationships: "this label belongs to that field," "these two elements should align," "this spacing should match that spacing." Less common than arrows but essential for layout feedback.
Freehand pen is for anything shapes can't express — underlining a sentence, circling an irregular area, drawing a rough sketch of what the layout should look like. It's messy by nature, and that's fine. Freehand annotations signal "I'm communicating quickly, not creating a deliverable."
Highlighter draws semi-transparent stripes. Use it like a physical highlighter — to emphasize text passages or code sections without obscuring them. The semi-transparency means the underlying content stays readable. Good for marking important paragraphs in a document screenshot or highlighting code that needs review.
Text adds labels directly on the image. Type a note, position it, done. Use it to explain what's wrong, what should change, or what the expected behavior is. Keep text short — "Button should say 'Save'" is better than a paragraph. For longer explanations, put them in the message body and use arrows on the image to reference locations.
Draw arrows, rectangles, circles, text, and highlights on any image. Full-resolution export.
Annotate an Image →Annotation Workflows That Actually Work
Bug reports. Take a screenshot of the bug. Upload it to the annotator. Draw an arrow at the broken element. Add a text label with the expected behavior. Download as PNG. Attach to the bug ticket. A developer looking at your annotated screenshot understands the issue in two seconds instead of reading three paragraphs of description. If the bug involves sensitive data visible in the screenshot, run it through the Redaction Tool or Face Blur first.
Design feedback. Open the mockup or live page screenshot. Use rectangles to highlight areas that need changes. Add text annotations describing the change: "Increase padding," "Wrong color — should be #2563EB," "This section should come before the hero." Number your annotations for easy reference in the accompanying message. Download and share.
Tutorial screenshots. Capture each step of a process. Annotate each screenshot with an arrow pointing at what to click and a text label with the step number or instruction. Use consistent colors — red for "click here," blue for explanatory notes. The result is a visual walkthrough that works without video. Combine annotated screenshots into a single document with the Image to PDF tool.
Document review. Screenshot the document page. Use the highlighter to mark passages that need editing. Add text annotations with suggested changes. Circle specific words or phrases that need replacement. This works for reviewing any visual content — contracts, marketing materials, slide decks, email drafts.
Before/after comparisons. Annotate the "before" image showing what's wrong. Save it. Then annotate the "after" image showing what was fixed. Place them side by side using the Collage Maker for a visual diff that stakeholders understand instantly.
Getting Clean Results
The difference between a useful annotation and a confusing mess is restraint. A few guidelines that help.
One color for one purpose. Use red for problems, blue for suggestions, green for approvals. Pick your convention and stick with it within a project. The color picker supports any color — but using three or fewer makes annotations scannable at a glance.
Thick lines on large images, thin lines on small ones. The line width slider goes from 1px to 12px. For a full-screen 1920×1080 screenshot, 3px lines disappear — bump it to 5px or 6px. For a cropped UI element, 2px or 3px is plenty. Match the annotation weight to the image size.
Don't over-annotate. Five annotations on one screenshot is about the maximum before it gets cluttered. If you need more, crop the image into sections and annotate each section separately. The Image Cropper handles this quickly.
Use Ctrl+Z liberally. The undo function removes annotations one at a time, most recent first. Drew an arrow that doesn't point where you meant? Undo it. Text in the wrong spot? Undo and redo. It's faster than trying to work around a misplaced annotation.
Export Settings
The annotator exports at the original image resolution — annotations are drawn as vector data during editing and rasterized at full size when you click Download. A 4000×3000 photo produces a 4000×3000 annotated file.
Three format options: PNG, JPEG, and WebP. For annotated screenshots, PNG is almost always the right choice. It preserves sharp edges on arrows, text, and shapes without compression artifacts. JPEG blurs annotation edges — fine for photos but noticeable on geometric shapes. WebP splits the difference with smaller files and decent quality.
The quality slider affects JPEG and WebP output (PNG is always lossless). For annotated screenshots shared in bug trackers or chat, 85–92% quality keeps file sizes reasonable without visible degradation. For documentation images that might be printed or zoomed, use PNG or WebP at 95%+. If file size is a concern after export, run the result through the Image Compressor.
Common Questions
Will annotations reduce my image quality? No. The original image stays untouched. Annotations are separate vector data merged only at export. The exported file matches the original resolution. Quality depends on the export format — PNG is lossless, JPEG and WebP use adjustable compression.
Can I annotate on a phone? Yes. All seven tools work with touch input. Drag to draw shapes, tap to place text. For precise work on a small screen, zoom in before annotating.
What format should I export as? PNG for screenshots and annotated images — it keeps lines and text sharp. JPEG for annotated photos where file size matters more than edge sharpness. WebP for a balance of both.
Can I annotate multiple images at once? One at a time. Annotate, download, reset, upload the next. To combine multiple annotated images into a single file afterward, use the Image to PDF tool.
Draw, Point, Send
Most communication about images is harder than it needs to be. "The button in the upper right corner — no, the other one — the one that says Submit — it's not aligned with the field above it." An arrow on a screenshot replaces all of that. The Image Annotator puts seven tools in your browser, runs on any device, and exports at the resolution your image came in with. Draw on the image. Say what you mean. Move on.