How to Extract Images from a Website (Including CSS Backgrounds and SVGs)

Sooner or later a page has an image you need and no clean way to save it. The product shot is a CSS background-image. The logo is an inline <svg>. The hero photo only appears once you scroll, and the file you finally right-click is a 480-pixel thumbnail standing in for a 2,400-pixel original.

Extracting images from a website is trivial for the one obvious file and fiddly for everything else. This guide covers why that happens, the four approaches people reach for, and the workflow behind Extract Images — the free InspectDev tool that finds every image source on a page and hands them over in one pass.

Why you need to extract images from a website

Most people arrive here with one of five jobs in mind, and only the first is a one-click task.

• Rebuilding a site whose source files are gone. The live page is the only surviving copy of the imagery, and you need it before the old site is retired.
• Recovering a brand asset. A client asks for their logo in a usable format, and the only version that exists is an inline SVG or a 180×180 favicon on their own site.
• Collecting references. A moodboard or a competitor teardown needs the real files at full resolution, not screenshots with someone else's UI in them.
• Auditing your own site. You want to see what you're actually shipping: formats, dimensions, and the assets that are far larger than they need to be.
• Assembling a dataset. Images collected for research or analysis, where the source URL and filename matter as much as the pixels.

Whichever job you have, the images you're chasing are usually the heaviest thing the page loads. On the median desktop page, images account for roughly 37% of transferred bytes — more than JavaScript, which gets most of the attention — at about 1 MB per page (Web Almanac 2025). That's why a single missing hero background can matter: it's often the largest file on the page.

Images are also what visitors actually look at first: on 85.3% of desktop pages, the largest element that determines how fast the page feels is an image (Web Almanac 2025). Finding the full-resolution originals matters for more than aesthetics.

What you're actually looking for

Before comparing tools, it helps to know what you're up against. A modern page can pull images from at least seven places, and only the first is visible to a right-click.

• <img src> — a direct image element. The only case right-click handles cleanly.
• srcset and <picture> — the browser picks one candidate for your screen. Right-click saves the rendered file, often the smallest one; the 2x or 2400w original is a different URL that the page never displays.
• CSS background-image — an image declared as a style property. There's no element to right-click, and pages often stack several (gradients plus photos) that swap at different breakpoints.
• Inline <svg> and icon sprites — vector markup, not a file. To reuse one, it has to be serialized into an .svg first.
• Favicons and app icons — small <link> resources in the document head.
• og:image and Twitter card meta — social preview images, frequently a larger or cleaner composition than anything on the page itself.
• data: URIs — images embedded directly in HTML, CSS, or JavaScript as base64. There's no URL to download because the bytes are already in the document.

Two more that trip people up:

• Lazy-loaded images below the fold, which don't enter the DOM until you scroll near them.
• Images inside iframes or Shadow DOM, which live in a separate document tree from the one you're inspecting.

The four ways people extract images (and what each misses)

Every method below works. The question is what it leaves behind.

Right-click → Save image as is fastest for one <img> on screen. It misses everything else — backgrounds, SVG, srcset originals, hidden or lazy images, meta images — and it saves whatever the browser rendered, not necessarily the highest-resolution source.

The DevTools Network tab is thorough for images the page actually requests: filter by Img, reload, scroll to trigger lazy loads, then click each request to preview and save it. It's also manual, one file at a time, with no original filenames and awkward handling of data: URIs.

A script (Python with BeautifulSoup, Node with Puppeteer, or a headless browser) is the right answer when you're doing this at scale or on a schedule. The cost is setup: plain HTTP scraping only sees server-rendered HTML, so it misses computed CSS backgrounds and anything injected at runtime. A headless browser closes that gap but adds dependencies, plus handling for logins, rate limits, and anti-bot defenses.

A browser extension runs inside the page, so it can read computed styles, wait for lazy content, and reach into iframes and Shadow DOM without you writing code. That's the sweet spot for one-off extraction on a live, JavaScript-heavy page. If you're after structured data rather than images, our Web Scraper handles the same point-and-click job for text and tables.

	Right-click	DevTools	Script or headless browser	Extension
<img> elements	Yes	Yes	Yes	Yes
srcset high-res candidates	No	Yes	Yes	Yes
CSS background-image	No	Yes	Headless only	Yes
Inline SVG and sprites	No	Partial	Partial	Yes
Favicon and og:image	No	Yes	Yes	Yes
data: URIs	No	Partial	Partial	Yes
Lazy, iframe, and Shadow DOM images	No	After scrolling	Headless only	Yes
Downloads a batch at once	No	No	With extra code	Yes
Code required	No	No	Yes	No

Meet Extract Images

Extract Images is one of the 22 tools in InspectDev, and it does that whole scan in a single click. Open it on a page and it builds a gallery of every image it can find:

• Every source, not just elements: <img>, srcset and <picture> candidates, CSS background-image URLs resolved from computed styles, inline and sprite SVGs, favicons, og:image and Twitter meta images, and data: URIs.
• The details that matter: file type, pixel dimensions, and file size for each result, with a preview.
• Filters and sorting: narrow by format, minimum dimensions, or source, and sort by size to surface the heaviest assets first.
• Two ways to save: select a batch and download a zip, or save any single image directly. Original filenames are preserved where the page provides them.
• Local execution: the scan reads the page and the download is bundled in your browser. Nothing is uploaded to a server, which means it also works on staging, intranet, and logged-in pages.

You can preview how this looks on the Extract Images tool page.

How to extract every image on a page with Extract Images

1. Add InspectDev to your browser and pin it to the toolbar. It runs in Chrome, Edge, Brave, and other Chromium-based browsers, plus Firefox.
2. Open the page you want to scan. If the site lazy-loads images, scroll to the bottom once so everything has entered the DOM.
3. Open InspectDev and choose Extract Images. It scans the current tab on open — no selector, no configuration.
4. Review the results. Each entry shows a preview, file type, dimensions, and size. Sort by size to spot the assets worth keeping.
5. Filter to what you need. Keep only SVGs, or drop anything under a minimum width, or separate page images from CSS backgrounds.
6. Select and download. Check the images you want and export them as a zip, or click one to save it directly.

Open Extract Images

After you extract: pick the right format before you reuse

If any of those images are going back onto a site, the file you extracted is usually not the file you should ship. The web still runs on older, heavier formats: WebP is in use by 21.8% of websites and AVIF by about 1.5% (W3Techs, 2026).

Converting pays off immediately. Google's own testing puts WebP lossy images at 25–34% smaller than comparable JPEGs at the same quality, and WebP lossless files 26% smaller than PNGs (Google WebP documentation). On a page whose median image payload is over a megabyte, that's a meaningful cut.

Keep the largest file you extracted as your master and convert from that, rather than re-exporting from a thumbnail. If you want to check what your own pages are serving — including the og:image you found earlier — the SEO Meta inspector lists every meta image and its dimensions.

Is it legal to download images from a website?

Downloading a publicly served image for personal reference is generally low-risk. Republishing someone else's image as if it were yours is where the trouble starts.

Copyright exists from the moment a work is created and fixed, with no registration or © notice required (U.S. Copyright Office). "Fair use" is a four-factor defense decided case by case, not a blanket pass for personal, educational, or non-commercial use. A practical check before you reuse anything:

• Assume an image is copyrighted unless the page says otherwise.
• Look for an explicit license — Creative Commons, a stock license, or a press kit meant for reuse.
• Read the site's terms of service and robots directives before automating downloads.
• Keep attribution when the license requires it.
• Don't bypass paywalls, logins, or technical access controls.
• For anything you publish, prefer your own assets, licensed stock, or commissioned work.

None of this is legal advice. For commercial use, ask a lawyer or the rights holder.

Troubleshooting

Images are missing from the scan. They're probably lazy-loaded. Scroll through the page once and run the scan again. Images that only appear after an interaction — a carousel, a tab, a modal — need that interaction first.

A background image points at a URL that won't open. Some sites check the referrer or a cookie before serving the file. Extract from the page while you're signed in and in the right context, rather than pasting the URL elsewhere.

The same image appears several times. That's srcset doing its job: each entry is a different resolution. Filter or sort by dimensions and keep the largest.

An SVG downloads as code. Inline SVGs are markup, not files. Save it with an .svg extension and it opens in a browser or design tool like any other vector.

Frequently asked questions

Can I download all images from a website at once?

Yes, with a tool that scans the page rather than the visible elements. Extract Images lists every source it finds and exports your selection as a single zip, so a page with forty images takes one pass instead of forty.

How do I find background images that don't show up in right-click?

Background images are CSS properties, not elements, so there's nothing to right-click. They have to be read from computed styles, which is what Extract Images does automatically. In DevTools, you can find the same URLs under Elements → Styles on the element, or by filtering the Network tab to images.

Is it legal to download images from a website?

For personal reference, usually. For republishing, only with permission or a license. Copyright applies automatically and fair use is narrower than most people assume, so check the license and terms — and when in doubt, use your own or licensed assets.

Does it work on JavaScript-heavy pages?

Yes. Because it runs inside the page, it reads the DOM and computed styles after the page has rendered, so it catches images a plain HTML scraper would miss. Scroll first if the site lazy-loads below-the-fold images.

Which browsers does Extract Images support?

Chrome, Edge, Brave, and other Chromium-based browsers, plus Firefox.

The short version

Extracting images from a website comes down to one question: are you looking at the page, or at everything the page loads? Right-click and a screenshot only ever give you the first. A scan that reads <img>, srcset, CSS backgrounds, SVGs, meta images, and data: URIs gives you the second.

Extract Images is free, runs entirely in your browser, and turns that scan into a zip. Open the tool or add InspectDev to Chrome / Firefox, and see the full extraction workflow it fits into.