You're doing a visual layout audit. You need to identify which elements are images, which are iframes, which are inline SVGs, and which use CSS backgrounds. You could right-click each one, or squint at the network tab. Or just toggle the Image Outliner in the onHover Chrome extension — it highlights images on the webpage and every other media element with a distinct colored border, turning an opaque layout into a labeled map in one click. No DevTools, no scrolling through the network tab, no guessing.
What gets outlined and in which color
Six element types, each with a distinct color so you can tell them apart at a glance without reading any markup:
Visual layout audit in under a minute
Toggle the outliner and scan the page top to bottom. You're looking for four things that commonly escape other review methods:
- Oversized images — outlines reveal images rendered at a small display size but loaded at full resolution, a clear sign of missing
srcset - Hidden iframes — ad networks, chat widgets, and analytics tools inject frames invisibly. The green outline makes them impossible to miss, even if they're 1×1px
- Canvas fingerprinting elements — canvas fingerprinting is a common privacy technique; the outliner surfaces every canvas including invisible ones used purely for tracking
- Expensive inline SVGs — complex SVGs with hundreds of paths can be costly to render; seeing their boundaries helps you decide which ones should be rasterized to PNG instead
Non-destructive overlay
Outlines use CSS outline, not border, so they don't shift elements or affect layout at all. Toggle off and the page returns to its exact original state.
Image SEO audit directly in the browser
The outliner doubles as a quick image accessibility check. Every <img> with a missing or empty alt attribute gets a red tint. You can spot every SEO and accessibility gap in your image markup without running a full audit tool. It's perfect for a pre-launch check that takes under 90 seconds.
Third-party content mapping
On a content-heavy page — a news site, an e-commerce product page — the outliner instantly shows which elements you own and which belong to third parties. Iframes from a different domain stand out because their content won't match your surrounding design. Tracking your ratio of first-party to third-party media helps with performance budgets and compliance checks.
Video above-the-fold check
Toggle the outliner and scroll to the top. If there's a video in the hero section, check three things: is autoplay and muted set correctly, is there a poster frame to avoid a blank flash before load, and is the file compressed for mobile? A 40MB autoplay video in the hero is a common LCP killer. The outliner helps you spot it in seconds.
Why visual audits catch what code review misses
Here's the thing about code review: it shows you what you wrote, not what the browser rendered. Those are different things more often than most developers expect.
An image can have a srcset attribute that looks correct in the markup but performs wrong in practice — wrong breakpoint values, wrong format ordering, a WebP that never gets served because the sizes descriptor doesn't match the actual layout width. A background image can be set on a container that flexbox or grid has collapsed to a much smaller size than the source image dimensions. An iframe can be positioned off-screen with a negative margin or absolute positioning that takes it completely out of the viewport while it still loads and executes. Code review catches none of this. The outliner shows you what the browser actually rendered, not what you intended to write.
That gap between intent and rendered reality is where layout bugs and performance issues hide. It's also where accessibility problems accumulate — an image that visually disappears due to an opacity animation but still exists in the DOM, an SVG icon with no accessible label that code review passed because the attribute was technically present but empty.
For teams that ship quickly, a 60-second visual pass with the outliner before every deploy catches things that months of code review never surface. We run it on onHover's own pages as a standard step. It takes less time than reading one pull request comment thread, and it's caught real issues that automated linting completely missed.
Using the outliner for performance budget decisions
Every media element on a page has a cost. Bandwidth. Render time. Layout complexity. Browser parsing overhead for SVG paths. Decode time for large images. These costs add up, and they're easy to underestimate when you're looking at individual elements in isolation.
The Image Outliner gives you a quick image audit and visual inventory of the total cost before you open a single DevTools panel. A page with 40 outlined images tells you immediately that you might be heading for a performance problem — not because 40 images is inherently wrong, but because you can see the full scope at once and decide whether it's justified. A product gallery page probably should have 40 images. A marketing landing page probably shouldn't.
The combination of visible image count and the onHover assets viewer — filtered by file size — gives you both the layout picture and the weight picture simultaneously. You see which elements are present and which ones are heavy. That combination is more actionable than either data point alone.
Background images are easy to miss in performance audits because they don't appear in typical image counts. They're not <img> tags. They don't show up in Lighthouse's image audit the same way. The teal outlines make them visible alongside everything else, so they get included in the weight assessment rather than overlooked. We've seen pages where background images accounted for more total bytes than all the <img> elements combined — and the developer had no idea because the performance tool they were using only flagged explicit image elements.
That's the part most guides miss. Performance budgets need to account for every byte, and the outliner is the fastest way to make sure nothing is hiding from the inventory.
Detecting tracking and privacy-relevant elements
If you've ever looked at a page through a privacy lens, you know the experience: you suspect something is loading and phoning home, but confirming it means parsing JavaScript, reading network logs, or installing a separate privacy auditing tool. The Image Outliner gives you a faster first pass.
Invisible canvas elements used for fingerprinting show up as amber outlines on elements that have no visible content and are positioned where you'd never expect a canvas. Tracking pixels — the classic 1×1 pixel images embedded by advertising and analytics platforms — appear as tiny blue outlines clustered in corners of the page or tucked inside other elements. They're genuinely invisible to the naked eye, but the outliner makes them hard to miss.
Iframes serving ads or analytics without any visible UI are green outlines floating in unexpected places. Sometimes they're legitimately invisible — a payment processor iframe that handles a form submission without showing anything. Sometimes they're third-party scripts that injected an iframe without disclosure, which is worth knowing about.
Privacy audits and compliance checks
For security researchers and developers auditing third-party integrations, the outliner surfaces the full map of embedded content without parsing JavaScript or network logs. It's the fastest way to answer "what is this page actually loading?"
For compliance reviews — GDPR audits, privacy policy accuracy checks, consent management verification — the outliner provides a visual inventory of all third-party embedded content in one pass. It won't replace a full network analysis, but it answers the first question fast: is there content here that shouldn't be?
Integrating the outliner into QA workflows
We use the Image Outliner Chrome extension feature as part of our own pre-launch checklist for onHover's web pages. Here's exactly what that check looks like so you can adapt it for your own workflow.
Toggle the outliner on. First scan: confirm no unexpected green iframes appear. Third-party scripts — chat widgets, analytics platforms, A/B testing tools — sometimes inject iframes without clear disclosure in their documentation. If you see a green outline in a place you didn't expect one, that's worth investigating before you ship.
Second scan: confirm all hero images have visible blue borders. An image that's been accidentally hidden — opacity: 0 left over from a loading animation, visibility: hidden that didn't get removed — shows up as an outline with no visible content inside it. That's a bug. The image is loading and consuming bandwidth but contributing nothing to the user experience.
Third scan: confirm the video poster frame is rendering correctly. A missing or broken poster attribute means there's a blank rectangle in the hero for however long it takes the video to load. That's a CLS hit and a bad first impression simultaneously.
The whole process takes under two minutes. It's not a replacement for automated accessibility and performance testing — those tools catch different things and operate at a different depth. The outliner is the fast visual pass that complements those tools by showing you the rendered reality before you run any scans. Run it first. It sets up everything else.