Does the highlighted region stay visible underneath, or is it covered up?

It stays visible. The fill is a translucent color wash blended with the existing pixels at your chosen opacity, plus a solid outline so the region reads clearly. If you want the region fully obscured instead, use JPG Area Hider.

Can I highlight more than one rectangle?

Run the tool again on the output of the first pass; each highlight is applied as its own step, so you can stack as many as you like.

How thick is the outline?

A fixed 3-pixel solid outline is drawn at full opacity around the rectangle's edge regardless of the fill opacity setting, so the region boundary stays clear even at low fill opacity.

What coordinates does the rectangle use?

X and Y are the pixel position of the rectangle's top-left corner, and width/height extend right and down from there, the same convention as most crop tools.

JPG Region Highlighter - Highlight a Rectangle on a Photo Online

Overview

Introduction

This tool draws attention to a rectangular region of a JPG with a colored, semi-transparent highlight, entirely client-side.

Unlike a fully opaque box, the highlighted area stays legible underneath, useful for calling out a spot without hiding what's there.

What Is JPG Region Highlighter?

A client-side JPG highlighting tool: you specify a rectangle by its top-left (X, Y) and its width/height, pick a highlight color and fill opacity, and the tool blends that color into the region while drawing a solid outline around its edge.

It's the 'draw attention to' counterpart to JPG Area Hider, which fully obscures a region instead.

How JPG Region Highlighter Works

For every pixel inside the rectangle, the tool linearly blends the highlight color with the existing pixel color, weighted by the chosen fill opacity: standard alpha compositing math, the same idea browsers use for CSS `rgba()` overlays.

A fixed 3-pixel band around the rectangle's inner edge is always blended at full opacity (ignoring the fill-opacity setting), giving the region a crisp visible border even when the fill itself is very subtle.

When To Use JPG Region Highlighter

Use it to call out a specific area in a screenshot for a bug report, highlight a detail in a product photo, or draw a reviewer's eye to one part of a larger image.

It works well layered with JPG Annotator afterward if you also want a text label pointing at the same spot.

Often used alongside JPG Area Hider, JPG Annotator and Color Pixels Highlighter.

Features

Advantages

Runs entirely client-side.
Keeps the highlighted content visible rather than covering it.
Solid outline stays visible even at very low fill opacity.

Limitations

Only rectangular regions are supported: no freeform or circular highlight shapes.
One highlight per pass; stack multiple passes for multiple regions.

Examples

Highlight a UI bug in a screenshot

Input

A 1600x900 screenshot, rectangle (400,300,200,120), yellow, 40% fill

Output

The screenshot with a translucent yellow box and outline over that region

A quick way to flag exactly where an issue is without hiding the surrounding context.

Subtly highlight a product detail

Input

An 800x800 product photo, rectangle (100,100,150,150), blue, 15% fill

Output

A gentle blue tint over one corner of the product

Low opacity keeps the emphasis subtle rather than alarming.

Best Practices & Notes

Best Practices

Use a high-contrast color (yellow, red) for urgent callouts, and low opacity + a calmer color (blue) for gentle emphasis.
Pair with JPG Annotator if the highlighted region needs an explanatory label too.

Developer Notes

highlightJpgRegion validates the rectangle against the image bounds up front, then iterates every pixel in the rectangle, blending toward the highlight color at fillOpacity except within a fixed OUTLINE_THICKNESS band at the rectangle's edge, which is always blended at full opacity regardless of the fill setting.

JPG Region Highlighter Use Cases

Flagging a bug location in a QA screenshot
Drawing attention to a product detail in a photo
Marking a region for a reviewer's attention

Common Mistakes

Setting fill opacity to 100%, which effectively hides the underlying content; use JPG Area Hider if that's actually the goal.
Specifying a rectangle that extends past the image's edge, which the tool rejects with an error.

Tips

Layer multiple highlight passes with different colors to distinguish several regions in one image.
Lower the fill opacity and rely on the solid outline alone for a more minimal callout style.

JPG Region Highlighter