How to Extract Images from a Website

The Trouble with "Save Image As"

We have all experienced this frustration: you see a beautiful graphic, photograph, or icon on a modern landing page. You right-click it, expecting to hit "Save Image As...", but the option isn't there.

Modern web development has moved far beyond simple <img> tags. Assets are frequently buried under transparent interaction <div> layers, injected via CSS background-image properties, or served as inline SVG strings to improve Lighthouse performance scores. These techniques completely break the native right-click functionality.

Locating Hidden Assets via DevTools

If you only need one specific image, you can hunt it down manually using the Chrome Developer Tools:

1. Press F12 (or Cmd+Option+I on Mac) to open DevTools.
2. Navigate to the Network tab.
3. Click the Img filter tab at the top.
4. Refresh the page (F5).
5. Sift through the waterfall of network requests until you spot the preview of your desired asset. Right click the request and select "Open in new tab".

While effective for a single file, this workflow is incredibly tedious if you are trying to extract an entire icon set or build a comprehensive moodboard.

Automated Extraction Techniques

To scale this process, automated extraction is required. A proper extraction tool doesn't simulate right-clicks; it parses the raw Document Object Model (DOM) and the CSS Object Model (CSSOM).

By traversing the DOM tree, an automated extractor can locate every node containing an src attribute, a srcset attribute, or a computed background style, aggregating them into a single downloadable queue.

Dealing with SVGs

SVGs (Scalable Vector Graphics) are often inlined directly into the HTML to prevent additional HTTP requests. To extract these, an advanced tool must identify the <svg> node, serialize its XML structure, and convert it into a downloadable .svg file. This allows designers to pull vectors directly into Figma without losing any path data.