How to Find and Download an Image Using Chrome Inspect Element

Chrome DevTools can reveal the file behind most images, even when a site disables right-click. Inspect the element, check src, srcset, and <picture> sources, then open the resolved URL in a tab and save it. For CSS backgrounds, find background-image in Styles or Computed. If the image is lazy-loaded or created by JavaScript, use the Network panel instead.

Finding a URL does not grant permission to copy, republish, or sell an image. Check the page license, creator terms, stock-library restrictions, and applicable law before using a downloaded file.

1. Inspect a visible image and copy its URL

Open the page in Chrome.
Right-click the image and choose Inspect. If the context menu is disabled, open DevTools with Ctrl+Shift+I (Windows/Linux/ChromeOS) or Cmd+Option+I (macOS), then activate the element picker with Ctrl+Shift+C or Cmd+Option+C. Chrome documents Inspect mode and element selection in its DevTools DOM documentation.
In the Elements panel, find an <img> node. Read its src attribute.
Right-click the URL value and choose Open in new tab, or copy it and paste it into a new tab.
When the image opens by itself, use Chrome’s normal Save image as command.

<img src="/media/photo-800.jpg" alt="Example">

A relative URL such as /media/photo-800.jpg belongs to the page’s origin. Opening it from DevTools or pasting it while the page is open lets Chrome resolve it to a full URL such as https://example.com/media/photo-800.jpg.

2. Get the full-size image from srcset or picture

Responsive pages commonly include several files. The first src may be only a fallback or thumbnail.

<img
  src="/img/landscape-800.jpg"
  srcset="/img/landscape-400.jpg 400w,
          /img/landscape-800.jpg 800w,
          /img/landscape-2000.jpg 2000w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Landscape"
>

Inspect every candidate in srcset. The descriptor ending in w is the candidate’s width; a 2x descriptor indicates pixel density. Choose the largest version you are authorized to use, or the version that matches your required output size. Do not assume the first URL is the original.

A <picture> element can contain format- or viewport-specific sources:

<picture>
  <source type="image/avif" srcset="/img/photo.avif">
  <source type="image/webp" srcset="/img/photo.webp">
  <img src="/img/photo.jpg" alt="Photo">
</picture>

Check each <source> and the fallback <img>. AVIF or WebP may be smaller while JPEG may be easier for another application to process.

3. Download a CSS background image

Use the element picker to select the visual area.
In Styles, search for background-image or background.
Expand the rule and copy the URL inside url(...).
If the declaration comes from a stylesheet, switch to Computed to see the final value after cascading rules are applied.
Open the URL in a new tab and save it.

.hero {
  background-image: url("../assets/hero-large.webp");
  background-size: cover;
}

Backgrounds may be SVGs, sprites, or generated URLs. A sprite is one file containing multiple icons; saving it gives you the whole sprite rather than one cropped icon.

4. Find lazy-loaded and JavaScript-generated images in Network

Some pages do not put the eventual file in src. They may use data-src, a <source> node, an intersection observer, a gallery request, or a JavaScript canvas.

Open DevTools and select Network.
Enable recording, clear the log, and reload the page.
Filter by png, jpg, jpeg, webp, gif, or svg, or select the Img resource type.
Scroll the target image into view. This triggers many lazy-loading requests.
Open likely requests and inspect Preview, Response, Headers, Initiator, and Timing.
Right-click the request and choose Copy URL, or open the Preview and save the image.

Network shows what the browser actually requested, including CDN transformations and URLs that never appear in the initial HTML. Compare dimensions and filenames when several candidates exist. Chrome’s Network documentation describes filtering requests and examining their details.

5. Handle special image types

Lazy-loading attributes

Search the Elements panel for data-src, data-lazy-src, data-original, or data-srcset. Scroll the image into view and inspect Network if those attributes contain placeholders.

Blob URLs

A URL beginning with blob: is a browser-local object URL. It may stop working after the tab closes or fail in another browser. Use the site’s download control when available, copy the underlying request from Network, or capture the rendered result when you have permission.

Data URLs

A data: URL embeds the bytes directly in markup. Opening it can display the image, after which you can save it. Very large data URLs may be inconvenient to copy.

Canvas output

A canvas may have no original file URL. The pixels can be generated at runtime, so the practical result is a rendered capture rather than the source asset. Use the site’s export function where possible.

Images inside iframes

Select the frame in Elements and inspect its document, or switch the Network filter to the frame’s domain. DevTools’ Resources view can help identify browsing contexts and domains. Authentication and cross-origin rules may affect what you can open separately.

6. Capture a rendered DOM image when you need a copy of what is visible

Chrome supports a built-in Capture node screenshot command. In Elements, select the node, right-click it, and choose the command. Chrome documents that you can screenshot an individual node in the DOM tree with this action. This creates a rendered screenshot; it may not preserve the original file’s dimensions, metadata, or transparency.

7. Common problems and fixes

Problem	Likely cause	Fix
The copied URL opens an HTML error page	The request needs cookies, a referrer, authentication, or a signed URL	Copy the request URL from Network while the page is loaded. Keep required access controls; do not bypass them.
Only a small thumbnail is available	Responsive markup or a CDN selected a small candidate	Inspect `srcset`, `<picture>`, gallery requests, and Network dimensions. Open the largest authorized candidate.
No image appears in Network	Recording was off, filters hid it, or loading is lazy	Enable recording, clear filters, reload with DevTools open, scroll into view, and check CSS declarations.
Right-click is disabled	The page intercepts the context menu	Use DevTools’ element picker or keyboard shortcut. Inspection does not change copyright or access rights.
The URL works only in the original tab	It is a blob URL, signed URL, or cookie-bound request	Use the site’s download/export control or copy the underlying Network request while authenticated.
The image is inside an iframe	The selected DOM belongs to a different browsing context	Inspect the frame document and filter requests by its domain.
The saved file has the wrong format	The CDN negotiated WebP/AVIF or the response is a transformed variant	Check the response headers and other `srcset` candidates. Convert only when your license and workflow permit it.

8. A repeatable checklist

Confirm you are allowed to download and use the image.
Inspect src, then srcset, <picture>, and CSS backgrounds.
Use Network after reload for lazy or JavaScript-generated assets.
Compare dimensions and choose the required authorized candidate.
Keep the original URL and license information with the downloaded file.
Use Capture node screenshot only when a rendered copy is acceptable.

9. Or skip the browser setup

If your goal is a clean rendered screenshot rather than the original asset file, ScreenshotNeo provides a website screenshot API. It accepts one GET request and returns PNG, JPEG, WebP, or PDF. The API can capture full pages, a CSS-selected element, a chosen viewport or device preset, dark mode, retina output, custom CSS and JavaScript, and more. See the ScreenshotNeo documentation for the full option list.

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(`HTTP ${res.status}`);
const bytes = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', bytes);

Cookie banners, newsletter popups, and chat widgets are removed before the shot. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing result. An MCP server lets Claude, Cursor, and other MCP clients call take_screenshot, get_page_info, and capture_pdf. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.

FAQ

Can Inspect Element bypass a download restriction?

It can reveal resources already delivered to your browser, but it does not authorize access to protected files or grant reuse rights.

What is the difference between downloading an image and capturing a node?

Downloading uses the original response URL and may preserve its source dimensions. Capture node screenshot saves the rendered appearance of the DOM node.

Why does the URL contain many query parameters?

CDNs commonly use query parameters for resizing, format negotiation, quality, or signed access. Removing them can break the request or violate access controls.

How do I find an image that appears only after clicking a gallery?

Keep Network recording, click the gallery item, and inspect the new image request. The larger file is often requested only after the interaction.