Attention heatmap — see where the eye lands first

What does this tool do?

The tool turns a single image into an attention heatmap — a colour overlay that predicts where the eye lands in the first seconds. Warm areas (red, yellow) mean “pulls a lot of attention”, cool areas (blue) mean “tends to be overlooked”. The computation runs entirely in your browser via WebAssembly or WebGPU and a specialised neural network trained specifically to predict visual saliency.

On top of that, you can drag a box over an important element — a button, a logo or a face — and get its focus score: the share of predicted total attention that falls on that region. Three exports are available: the overlay image as a PNG, the bare heatmap as a transparent PNG to reuse in your own editor, and a JSON file with the score and the strongest hotspots.

How does the AI predict attention?

Where a person looks first is largely predictable. Perception research distinguishes involuntary (bottom-up) from voluntary (top-down) attention. The involuntary kind is driven by image features: strong contrast, bright areas, edges, colours and especially human faces pull the gaze automatically, before the brain decides consciously.

This bottom-up behaviour is exactly what the neural network learned from many thousands of real gaze recordings. It takes your image as input and estimates, for each region, how likely it is to be fixated in the first seconds. The result is a probability map that the tool colourises and lays over your image. It is a prediction from learned patterns — not a recording of a real person.

When are the results reliable — and when not?

The heatmap captures the first, reflexive glance at static images well: it reliably shows which elements stand out and which fade. For thumbnails, ads and single layouts it is a fast, free early indicator that would otherwise require expensive pre-tests.

There are clear limits you should know. The model only predicts involuntary first-moment attention. It does not know what viewers deliberately search for, what they read, which brand they prefer, or the order their gaze takes. It also does not segment by audience, age or prior knowledge. So: the heatmap is a prediction of the first glance, not real eye tracking and no substitute for testing with real users. Under the EU AI Act (Art. 50) the tool shows this notice permanently below every result — use the heatmap as an indicator, not as proof.

What do I use an attention heatmap for?

The most common use is designing content where the first impression counts. For a YouTube thumbnail you check whether the face and title are the hotspots, or whether an unimportant detail steals the gaze. For an ad or social-media post you confirm the product and the call-to-action get attention. For a landing-page header you drag a box over the button and see, via the focus score, whether it stands out or sits in a cool zone.

Heatmaps are also handy for logos, packaging and posters: they show whether the brand sits at the centre of attention. The JSON export makes the results reusable for further processing — for example to document several drafts or hand the hotspot data to a downstream step.