How to Extract Images and Image URLs from Websites?

Extracting images from web pages is a core requirement for e-commerce website scraping, digital asset management, real estate aggregation, and machine learning dataset collection.

When scraping images, web scrapers typically extract the image URL from the page HTML rather than downloading the binary file directly during the initial scrape. Once you have captured the full image source URLs in your dataset, you can either process them directly or send them to an automated file downloader pipeline.

In this guide, I will cover how to extract standard image URLs, inspect and handle lazy-loaded assets, process responsive image sets, and resolve common URL structure issues.

Understanding How Images Are Stored in HTML

Web browsers render images by reading specific attributes within HTML tags or CSS declarations. To extract the correct image path, you must first identify how the target website embeds its media.

1. Standard Image Elements

In traditional web pages, images are embedded using the <img> element, where the URL is stored directly in the src attribute:

<img src="https://example.com/images/product-main.jpg" alt="Sample Product" class="product-image">

To extract this URL, target the element using its CSS selector (such as .product-image or img.product-image) and extract the src attribute.

2. Responsive Image Sets

Modern websites often provide multiple image sizes for different screen resolutions using the srcset attribute:

<img src="small.jpg" srcset="product-320w.jpg 320w, product-800w.jpg 800w, product-1200w.jpg 1200w" alt="Product">

If you need the highest resolution available, you will want to target srcset rather than src, then parse out the largest file reference.

3. Background Images in CSS

Some web designs apply images as background properties inside inline styles:

<div class="hero-banner" style="background-image: url('https://example.com/assets/banner.jpg');"></div>

In these cases, extracting the style attribute and using a regular expression to capture the value inside url('...') is required.

Step-by-Step: Extracting Standard Image URLs

When configuring a scraping agent, capturing image URLs follows the same logic as extracting any other HTML attribute.

1. Open your browser’s Developer Tools (press F12 or right-click the element and select Inspect).
2. Locate the <img> tag in the DOM tree and determine a reliable CSS selector (for example, .product-gallery img or #main-image).
3. In your scraper field configuration, set the extraction type to ATTR (Attribute).
4. Enter src into the attribute name field.

scrape images from website1286×672 285 KB

When the scraper runs, it will extract the string value assigned to the src attribute for every matching element across the target URLs. For a complete walkthrough on configuring fields and running jobs, see the guide on how to create a scraping agent.

Handling Lazy-Loaded Images

Most modern websites use lazy loading to improve page load speed. Instead of loading every image immediately, the browser delays loading off-screen images until the user scrolls them into view.

When lazy loading is active, the initial HTML typically contains a lightweight placeholder or transparent pixel in the src attribute (like data:image/svg+xml... or placeholder.gif). The real image URL is stored in a custom data-* attribute.

Common lazy load attributes include:

• data-src
• data-original
• data-lazy-src
• data-fallback-src
• data-srcset

When the page loads or when a visitor scrolls, client-side JavaScript reads the value from the data attribute and copies it into src.

Inspecting Lazy-Loaded Elements

To see which attribute holds the high-resolution source:

1. Inspect the image element before scrolling the page.
2. Check if src contains a placeholder while an attribute like data-src contains the actual file URL.
3. Set your field extraction type to ATTR and specify the exact data attribute (such as data-src) instead of src.

For example, on lazy-loaded demo pages like https://ressio.github.io/lazy-load-xt/demo/fadein.htm:

lazy load image extraction1431×704 242 KB

In this HTML markup, data-src holds the destination image URL while src holds the deferred placeholder. Configuring the extraction attribute to data-src ensures you extract the full image path on the first request without needing to execute full scroll interactions.

You can test selectors against live HTML using web-based extraction utilities like the Agenty online extract tool.

Common Image Extraction Challenges and Solutions

Handling Relative vs. Absolute URLs

Web pages often use relative paths for internal assets:

<!-- Relative path -->
<img src="/media/catalog/product/p/1/p1001.jpg" alt="Item">

<!-- Absolute path -->
<img src="https://scrapingsandbox.com/media/catalog/product/p/1/p1001.jpg" alt="Item">

If you extract a relative URL like /media/catalog/..., downstream systems will not be able to locate the image file without the domain prefix.

To resolve this:

• Verify whether the website provides absolute paths in alternate attributes (such as data-zoom-image or Open Graph tags like <meta property="og:image">).
• Prepend the website base domain (for example, https://scrapingsandbox.com) during post-processing or data export.

Handling Dynamic CDN Sizing Parameters

Many modern platforms (such as Shopify, Cloudinary, and Fastly) dynamically generate image dimensions via query parameters:

<img src="https://cdn.example.com/product_100x100.jpg?v=123456" data-full-size="https://cdn.example.com/product_1024x1024.jpg?v=123456">

If your objective is to gather high-resolution assets:

1. Check if the page contains a higher-quality variant in data-zoom-image, data-large-img, or a linked <a> tag wrapping the image.
2. If only the thumbnail is available, inspect the URL pattern. Many CDNs allow you to replace dimension suffixes (like _100x100 or ?width=100) with larger dimensions or remove the query parameters entirely.

Extracting Images from <picture> Elements

Websites serving WebP or AVIF formats often use the HTML5 <picture> tag:

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

If your downstream workflow requires a specific format:

• Target picture > source[type='image/webp'] and extract the srcset attribute for WebP images.
• Target picture > img and extract the src attribute for standard JPEG or PNG fallbacks.

Selector Cheat Sheet for Image Extraction