How to Download an Image from a Website with Inspect Element

Fastest answer: right-click the image and choose Save Image As. If that option is missing or saves the wrong thing, open developer tools, inspect the image element, then use the Network panel to find the image request and copy its URL. Open the URL in a new tab and save it normally if the resource is publicly accessible.

Inspect Element exposes resources the browser loaded. It does not guarantee that a site provides a separate original-resolution file, that the URL works outside the page, or that you have permission to reuse the image.

1. Try Save Image As first

Open the page in desktop Chrome or Edge.
Place the pointer over the image.
Right-click and choose Save Image As.
Select a folder and save the file. Chrome normally uses your configured download location. See Google Chrome Help’s download instructions.

This route is quickest when the browser recognizes a direct image under the pointer. It may fail when the visible graphic is a CSS background, a canvas drawing, a responsive image, or covered by another element.

2. Inspect the image element

Right-click the image and select Inspect. You can also open DevTools from the browser menu.
The Elements panel should select the page node under the pointer. Look for an <img> element.
Check attributes such as src, srcset, data-src, and currentSrc. A srcset can contain several widths; the browser may have loaded a different candidate from the one you first notice.
Right-click a URL value when the browser offers a copy action, or select the address and copy it.

Paste the address into a new tab. If it displays as an image, use the tab’s normal Save Image As command.

Do not assume that the first URL is the highest-resolution version. Responsive delivery, transformations, authentication, and site-specific code can change which file is available.

3. Find the request in the Network panel

Use Network when the element has no useful URL, the image is loaded lazily, or the visible graphic is assembled by scripts.

Open DevTools and select Network.
Reload the page while Network is open. This records requests made during loading.
Filter the request list to Img (Chrome) or image resources in Edge. You can also search likely extensions such as .png, .jpg, .jpeg, .webp, .gif, or .avif.
Click a likely request and inspect its headers, preview, response, and request URL. Chrome documents request details and previews in Inspect network activity; Edge documents filtering image requests and copying a request URL in its Network features reference.
Use Copy URL (or the equivalent copy command), open the address in a new tab, and save it if it renders independently.

Reloading matters: Network is a record of activity, so a request made before the panel opened may not appear. Disable the filter temporarily if the image is being returned with an unusual content type or extension.

4. Images that are not ordinary img files

CSS background images

In Elements, inspect the selected node’s Styles or Computed pane for background-image: url(...). Copy that URL and test it in a new tab. If the URL is generated or missing, Network is usually the more reliable route.

Lazy-loaded images

An image may use a placeholder until it enters the viewport. Scroll it into view, then check Network again. Look for attributes such as data-src or a request that appears only after scrolling.

Responsive images

srcset may list several files at different widths. The browser’s loaded request in Network tells you which candidate was actually fetched. Other candidates may be unavailable, transformed, or restricted.

Canvas and generated graphics

A canvas can contain pixels without an image URL in the DOM. Network may reveal the source asset used to draw it, but it may not reveal a standalone final file. Saving the page or copying a canvas depends on the site’s implementation and is not a universal DevTools feature.

Images inside an iframe

Select the iframe in Elements, open its document when DevTools provides that context, and inspect the nested image there. Requests can also be found by reloading with Network open and checking the initiator or frame associated with each request.

5. When the copied URL does not work

Symptom	Likely cause	What to try
The request is missing	Network opened after the page loaded, or a filter hides it.	Open Network, reload, clear the filter, then filter to image resources.
The URL shows an error	The server requires cookies, a referrer, authentication, or a short-lived token.	Open it from the original page context, inspect request headers, and do not assume the URL is reusable elsewhere.
The file is tiny or blurry	You found a thumbnail, placeholder, or low-width responsive candidate.	Compare `srcset` candidates and Network requests; the site may not expose a larger file.
The preview is blank	The response is not a conventional image, or it is generated data.	Check the response headers and content type. Inspect CSS or the script that creates the graphic.
A consent or login screen appears	The resource is gated by session state.	Sign in or accept the site’s required controls where you are authorized. DevTools does not bypass access controls.
Right-click is disabled	Page JavaScript intercepts the context menu.	Open DevTools from the browser menu or keyboard shortcut, then use Elements and Network.

6. Browser and site limitations

Chrome and Edge document the same general workflow: select an element, inspect loaded resources, filter requests, and copy a request URL. Labels and exact menu behavior vary by browser version.

DevTools shows what the browser received. It cannot promise:

an original file rather than a resized or transformed variant;
a URL that works without the page’s cookies, headers, or session;
a separate file for a background, canvas, or video frame;
access to content blocked by authentication, bot checks, or a failed request.

Saving a file and having permission to publish or redistribute it are separate questions. Check the image license, the site’s terms, and any applicable permission requirements before using the image elsewhere.

7. Or skip the browser setup

For screenshots of a whole page or a rendered element, ScreenshotNeo provides a single GET request that returns PNG, JPEG, WebP, or PDF. Its capture flow accepts consent banners before the shot and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each cleanup step can be disabled. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers.

Read the ScreenshotNeo API documentation for the full option list, including CSS element capture, full-page lazy-image loading, custom CSS and JavaScript, waits, blocking rules, headers, cookies, user agents, geolocation, device presets, retina scale, resizing, caching, signed links, asynchronous jobs, bulk capture, usage reporting, and PDF settings.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo also includes an MCP server with take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots each month without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account.

8. Performance, reliability, and cost considerations

Manual DevTools: best for one-off downloads because it uses the browser session you already have. It becomes slow when you need many pages or repeatable results.
Network reloads: capture requests after the page is fully loaded when images are lazy-loaded. A hard refresh can change which responsive resource is selected.
Automated capture: use waits for a selector, delay, or network idle when a page renders asynchronously. Block unnecessary ads, trackers, or resource types when they are not part of the result.
Caching: if the page is unchanged, a chosen cache TTL can reduce repeated work. ScreenshotNeo cache hits are not billed.
Billing: ScreenshotNeo bills only clean shots. Failed loads, bot checks, blank pages, timeouts, and cache hits are free, with verdict and billing headers returned for each response.

9. Troubleshooting checklist

Did you open Network before reloading?
Did you clear an overly narrow filter?
Did you scroll the image into view so lazy loading could start?
Did you inspect srcset, CSS backgrounds, and data-src?
Does the copied URL require the original page’s cookies or authorization?
Are you trying to save a canvas or generated graphic rather than a file response?
Do you have permission to reuse the image?

10. FAQ

Can Inspect Element download an image by itself?

No. It helps you locate the element or network request. You still save the resulting resource with the browser or another authorized tool.

Why does Save Image As return a different file?

The page may use a thumbnail, responsive candidate, transformed URL, or CSS background. Check the actual request in Network.

Can I always get the original-resolution image?

No. The site may expose only a resized variant or may never send the original to your browser.

Is copying an image URL permission to use it?

No. URL access and reuse rights are separate. Check the license and the site’s terms.

What is the quickest repeatable way to capture a rendered page?

Use a screenshot API such as ScreenshotNeo when you need repeatable requests, cleanup of consent UI, element or full-page options, or automation through its API and MCP server.