To make things concrete, I’ll mostly be extracting the Intoli logo rendered as a PNG, JPG, and SVG from this very page. I will use Puppeteer-a JavaScript browser automation framework that uses the DevTools Protocol API to drive a bundled version of Chromium-but you should be able to achieve similar results with other headless technologies, like Selenium. The techniques covered in this post are roughly split into those that execute JavaScript on the page and those that try to extract a cashed or in-memory version of the image. Whatever your motivation, there are plenty of options at your disposal. Maybe you just don’t want to put unnecessary strain on their servers by requesting the image multiple times. Perhaps the images you need are generated dynamically or you’re visiting a website which only serves images to logged-in users. The simplest solution would be to extract the image URLs from the headless browser and then download them separately, but what if that’s not possible? Puppeteer.In this post, I will highlight a few ways to save images while scraping the web through a headless browser.

Add adblocker plugin to block all ads and trackers (saves bandwidth) const AdblockerPlugin = require( 'puppeteer-extra-plugin-adblocker') Add stealth plugin and use defaults (all tricks to hide puppeteer usage) const StealthPlugin = require( 'puppeteer-extra-plugin-stealth')

Any number of plugins can be added through `e()` const puppeteer = require( 'puppeteer-extra') Quickstart // puppeteer-extra is a drop-in replacement for puppeteer, // it augments the installed puppeteer with plugin functionality. # puppeteer-extra works with any puppeteer version: Installation yarn add puppeteer puppeteer-extra A light-weight wrapper around puppeteer and friends to enable cool plugins through a clean interface.

Free download puppeteer extra