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 ImgEx parse complex HTML, picture tags, and responsive srcset attributes for you.
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.
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).
• `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.