How to Extract Images From HTML
Learn how to parse HTML markup to find image tags, src attributes, data-src attributes, srcset lists, and inline styles with regex and DOM parsers.
Key Takeaways
- Parsing HTML with regular expressions is prone to edge cases; DOM parsers (like Cheerio or JSDOM) are more robust.
- Always check `data-src`, `data-original`, and `data-lazy` attributes in addition to standard `src`.
- Deconstruct `srcset` attributes to extract high-density retina resolutions (2x, 3x).
No coding needed to parse HTML
Let our website image extractor parse complex HTML, picture tags, and responsive srcset attributes for you automatically.
This guide is part of our comprehensive collection on css, lazy loading & hidden media. Explore the structured learning path below:
Whether you have raw HTML source code from an offline file or want to build your own scraping pipeline, understanding how images are embedded inside HTML markup is fundamental. This guide breaks down HTML image extraction with code examples, and explains how to extract images from HTML efficiently.
Key HTML Attributes to Inspect
• src: The fallback or standard image URL.
• srcset: Comma-separated candidate strings with width (1200w) or pixel density (2x) descriptors.
• data-src / data-lazy: Custom attributes used by JavaScript lazy loaders (e.g. lazysizes, lozad). Learn how to handle them in how to extract lazy-loaded images.
• loading='lazy': Native browser lazy loading standard.
Code Example: Parsing HTML with Node.js & Cheerio
Cheerio provides a fast, lightweight jQuery-like syntax to parse HTML strings server-side:
import * as cheerio from 'cheerio';
function extractImages(htmlString, baseUrl) {
const $ = cheerio.load(htmlString);
const imageUrls = new Set();
$('img').each((_, el) => {
const src = $(el).attr('src') || $(el).attr('data-src');
if (src) {
imageUrls.add(new URL(src, baseUrl).href);
}
});
return Array.from(imageUrls);
}Frequently Asked Questions
Can ImgEx parse raw HTML code?
Yes, you can input live URLs into ImgEx which executes deep HTML and DOM parsing automatically without writing any code.