Headless browser image quality - Headless chrome, phantom js, slimmer js

Question

I'm looking for more information on what takes place under the hood in headless browsers. I've been working with different headless browsers in the past such as slimmerJS, Phantom.js and Headless Chrome, with the purpose of taking screenshots in different sites.

I never got to generate a real-looking, sharp-quality image that would resemble what you see in the browser, it looks like a tool limitation, like, that is the maximum quality you can get out of this, but I want to understand why, and possibly, how to make it better.

Please compare the examples below.

1. In this website, https://en.wikipedia.org/wiki/Main_Page, find the Wikipedia logo at the top-left corner.
2. This is a screenshot of that logo taken by headless chrome through puppeteer:

If you compare the real website vs the screenshot, you can see how the image is blurred out. In this example, it's just an image, but this also happens with HTML text.

Now, If I were to take a screenshot using my computer, be it windows, mac, linux, I'd get a very good quality screenshot that completely looks like the real deal.

So why does this happen? I tried all the standard things as setting the screenshot with top quality in each library, and setting a big enough viewport so the screenshot has a decent resolution. Is this really the top quality you can get from a headless browser screenshot?

Any enlightenment on this area would be appreciated. Thanks!

Answer 1

You will get better results setting the deviceScaleFactor to 2 (a.k.a emulate retina):

(async () => {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage();
    await page.setViewport({width: 800, height: 800, deviceScaleFactor: 2});
    await page.goto('https://en.wikipedia.org/wiki/Main_Page')

    await page.screenshot({ fullPage: true, path: 'test.png' })
})();

As you can see, you can get very decent results:

Source: https://github.com/puppeteer/puppeteer/issues/571