Element screenshots

Each violation can carry a small thumbnail of the offending element, highlighted in context, so a reader sees what the finding is about without opening the site.

A finding reads far better with a picture of the element it is about. Inclusa can attach one to each violation node.

The element in context

Each thumbnail is a small WebP of the element, highlighted in context, so a reader can see exactly what the finding refers to. The capture is shadow DOM aware, walking from the host through the shadow root to the element, so components built with shadow DOM are captured correctly.

Kept git friendly

Thumbnails are clipped to the element plus a little padding, downscaled, saved at low quality, and count capped at 25 per page and 120 per report, which works out at roughly a kilobyte each. They are inlined as data URIs, so a saved report stays a single portable file you can commit and share.

Light on the wire

Screenshots are stripped from the live stream during a crawl to keep each frame small. The studio loads the full saved report from disk when it needs the thumbnails, so the live view stays fast and the saved report stays complete.