← Back to Docs

Extract Images

Extract Images scans the current page for every visual asset it can reach and collects them into a single panel: regular <img> elements, images loaded through CSS background-image, and inline SVG.

Extract Images panel showing filter tabs with counts, a download-all link, and a thumbnail grid of every image found on the page

What It Finds

The tabs across the top show a live count for each source, and you can filter the grid down to one type:

Tab Source
All Everything the tool found on the page
IMG <img> elements, including srcset candidates
CSS Background images declared in stylesheets and inline styles
SVG Inline SVG elements and SVG referenced as an image

Tabs stay visible even at zero, so you can tell at a glance whether a page simply doesn't use CSS backgrounds or SVGs.

Browsing the Grid

Every result appears as a thumbnail, badged with the source type it came from. Each thumbnail carries its own actions for opening the image or downloading it individually.

Use the filter field at the top to narrow the list — it matches against the image's URL and its alt text, so searching logo finds both the file named logo.svg and the image whose alt text reads "Company logo".

Downloading

  • Single image — use the actions on a thumbnail to grab just that asset
  • Everything — click Download all to save every image currently shown in the grid

Download all respects the active filter, so filtering to SVG and clicking download saves only the SVGs.

Tips

  • Extracting a design system? Filter to CSS to surface the background textures and gradients that never appear as files in the page source
  • SVGs come out as source, so they stay crisp at any size and can be dropped straight into a codebase
  • Images served from a CDN are captured at the resolution the page requested. For a larger version, check the srcset entry or open the original URL