Download images and SVGs from any website

Collect every image, background image and inline SVG from a page or a single component, preview them in a grid, and download one or all of them.

What it finds

Select an element and the Assets section on the Element tab collects every visual asset inside it:

• Images: the source of each <img>, such as PNG, JPEG, WebP, GIF or SVG files.
• Background images: every url() in the CSS background-image of each element, including several layered backgrounds on one element.
• Data URLs: images embedded straight into the CSS as data: URLs, saved with the right file extension.
• Inline SVGs: <svg> elements written into the page, saved as standalone .svg files with their full markup. Base64 encoded SVG data URLs in CSS are decoded into SVG files too.

Select the <body> to gather the assets of the whole page, or select one section, such as a hero, an icon row or a product gallery, to get just those files.

How to download images from a page

1. Open the page and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
2. Click an element to select it. For the whole page, press Alt + Shift + ↑ until body is selected.
3. Open the Assets section on the Element tab.
4. Click any thumbnail to download that file, or click Download All to save them all.

The first download asks for the browser's downloads permission. Screen Ruler only requests it when you actually download something.

The asset grid

Assets are laid out in a justified grid that keeps each thumbnail's shape, so wide banners and small square icons are both easy to recognise. Every thumbnail shows its format, such as png, webp or svg, and its natural dimensions in pixels, which is the size of the file itself rather than the size it is displayed at.

Downloads keep the original file name where there is one. When a server hands back a file without a matching extension, Screen Ruler checks the file's type and adds the right one, so a WebP served from an extension-less URL still saves as .webp.

How it collects assets

• Tracking pixels are filtered out. Images smaller than 10 pixels on either side, and background images on elements 8 pixels or smaller, are skipped.
• Duplicates are removed. An icon used twenty times appears once.
• Web components are included. The search goes inside open shadow roots, so images rendered by component libraries are found too.
• SVGs are self-contained. Inline SVGs that reference an external sprite with <use href> are left out, because the saved file would be empty without the sprite.

Limits

• The listed source is the src attribute. For responsive images with srcset or <picture>, you get the file named in src, which may not be the largest version the site offers.
• Lazy images need to load first. Images that have not been given their real URL yet show up only after you scroll to them. Reselect the element to refresh the list.
• Not every visual is a file. Video, canvas drawings and images drawn by CSS pseudo-elements are not collected.
• Respect the rights to what you download. Being able to save a file does not mean you are licensed to reuse it.

When it is useful

• Grabbing icons as SVG for a mockup or a bug report, without copying markup out of DevTools.
• Collecting your own site's images for a migration or a content audit.
• Finding oversized files. Compare natural dimensions with how large an image is shown, then check the page weight to see what images cost.
• Building reference boards from sites you are studying.

The SVG downloader roundup compares other tools, and the extracting content docs show the asset grid. To save a picture of any element as it looks on screen, use element screenshots. Extract Assets is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How do I download all images from a website at once?

Activate Screen Ruler, click anything on the page and press Alt + Shift + ↑ until body is selected. Then click Download All in the Assets section to save every image, background image and inline SVG on the page.

Can I download an SVG icon from a website?

Yes. Inline <svg> elements are listed as assets and saved as standalone .svg files with their full markup. SVG files loaded through <img> or CSS backgrounds are downloaded as the original file.

Does it get CSS background images?

Yes. Every url() in an element's background-image is collected, including data URLs, which are saved with the correct file extension.

Why is an image on the page missing from the list?

It may be very small (under 10 pixels, which is treated as a tracking pixel), not loaded yet because it is lazy loaded, drawn by a CSS pseudo-element, or outside the element you selected. Select a larger parent or the body and scroll the page so lazy images load.