How to Find All Images on a Website
A complete walkthrough on how to uncover all visible, hidden, background, and lazy-loaded images across a website.
Key Takeaways
- Standard `<img>` tags account for only ~60% of visual assets on modern pages.
- Open Graph (`og:image`), Twitter cards, CSS backgrounds, and SVG sprites hold the rest.
- Comprehensive extraction checks all DOM layers.
Find every image on any webpage
Discover foreground, background, meta, and vector assets in seconds.
When you look at a website, the images you see on the screen are only part of the story. Hidden social sharing previews, vector icons, CSS sprite sheets, responsive alternatives, and lazy-loaded gallery slides all live within the page structure. Here is how to find all of them.
The Four Layers of Web Images
1. **DOM Elements (`<img>`, `<picture>`):** Standard foreground images and responsive pictures.
2. **CSS Stylesheets (`background-image: url(...)`):** Hero section backgrounds, button patterns, and UI textures.
3. **Meta Tags (`og:image`, `twitter:image`):** High-resolution promotional cards intended for social platforms like Facebook, Twitter, and LinkedIn.
4. **Vector Definitions (`<svg>`, `<symbol>`):** Crisp logos, icons, and interface graphics.
How ImgEx Discovers All Four Layers
ImgEx scans the rendered DOM, evaluates inline style attributes, parses `<style>` declarations, checks `<link rel='icon'>` tags, and examines OpenGraph metadata to assemble an exhaustive visual manifest.
Frequently Asked Questions
Why do some websites have 100+ images when only 10 are visible?
Many websites preload image variations, responsive sizes for mobile/retina, hover-state graphics, and slider carousels that are initially hidden from viewport view.