How to download background images and lazy-loaded images
Scroll through the whole page first, then open IDM - Bulk Download Manager Extension. It reads the page's styles and lazy-loading attributes, so CSS background images and pictures that only load as you scroll show up in the Images list next to the regular ones. Right-click "Save image as" can't reach most of these, because there is no image element to right-click or it hasn't loaded yet.
Why these images are hard to save
Background images
Many hero banners, cards and galleries put the picture in the page's style sheet as a background instead of using an image element. Right-clicking one gives you the normal page menu, with no "Save image as". The image is there, but only the styles know its address.
Lazy-loaded images
To load faster, pages often wait until you scroll near an image before fetching it. Until then the
real address sits in an attribute such as data-src and a blank or blurry placeholder is
shown. Pages with endless scrolling go further and only add new images to the page as you reach the
bottom.
Download them with IDM - Bulk Download Manager Extension
-
Scroll through the page
Scroll slowly to the bottom, or press End a few times and wait a moment, so lazy images and new batches load.
-
Open the popup
Click the IDM icon. If it was already open, click Rescan at the top to read the page again.
-
Lower the size filter if needed
Small decorative backgrounds may be hidden by the minimum size. Choose Any size to see everything. Images whose size isn't known yet are always shown.
-
Select and download
Hover over a thumbnail to check its name and size, select the ones you want and click Download selected, or ZIP for one file.
Where it looks
- Styles: background images, border images and list bullets, both from the style sheets and from inline styles.
-
Lazy-loading attributes:
data-src,data-lazy-src,data-original,data-bg,data-srcsetand other common variants. -
Responsive images: every size listed in
srcsetand in<picture>sources, so you can pick the largest. - Script-loaded images: images the page fetched with a script, taken from the browser's list of loaded files.
- Everywhere on the page: embedded frames, open web components and video preview images.
What it can't find
-
Images drawn on a
<canvas>, such as in some viewers and games. They are pixels on the screen, not files. -
Images the page keeps in its own memory (
blob:addresses). They exist only inside that tab and can't be downloaded from outside it. - Backgrounds added through
::beforeand::afterdecorations. - Images a page has removed again. Some very long feeds drop older pictures while you scroll. Scroll part of the way, download, then continue.
Small icons sometimes come as one "sprite" image that holds dozens of icons side by side. You'll get the whole sheet, not the separate icons.
Without an extension: the developer tools
Chrome's developer tools can find any image, one at a time:
- Right-click near the image and choose Inspect.
-
In the Styles panel, look for
background-image: url(…)on the selected element or its parents. For lazy images, look fordata-srcon the image element. - Right-click the address, open it in a new tab and use Save image as.
Alternatively, open the Network panel, choose the Img filter and scroll the page: every image that loads is listed, and you can open each one. Both methods work, but they take a few minutes per image.
FAQ
Why do I see the same picture in several sizes?
Responsive images offer several versions for different screens. They're all listed, so you can keep the largest: set the size filter to 512 pixels or hover to compare sizes.
Some thumbnails are blank or blurry. What are they?
Usually placeholders shown before the real image loads. Scroll to that part of the page and click Rescan; the full image then appears in the list.
Does it work on pages with endless scrolling?
Yes, for everything that has loaded. Scroll as far as you need, click Rescan and download. For very long feeds, do it in a few rounds.