Calidad de imagen del navegador sin cabeza: Chrome sin cabeza, phantom js, slimmer js

Estoy buscando más información sobre lo que ocurre debajo del capó en los navegadores sin cabeza. He estado trabajando con diferentes navegadores sin cabeza en el pasado, como slimmerJS , Phantom.js y Headless Chrome , con el propósito de tomar capturas de pantalla en diferentes sitios.

Nunca pude generar una imagen real y de calidad nítida que se pareciera a lo que ves en el navegador, parece una limitación de herramienta, es decir, esa es la máxima calidad que puedes obtener de esto, pero quiero entender por qué, y posiblemente, cómo mejorarlo.

Por favor compare los ejemplos a continuación.

1. En este sitio web, https://en.wikipedia.org/wiki/Main_Page , encuentre el logotipo de Wikipedia en la esquina superior izquierda.
2. Esta es una captura de pantalla de ese logotipo tomada por Chrome sin cabeza a través de titiritero:

Si compara el sitio web real con la captura de pantalla, puede ver cómo se difumina la imagen. En este ejemplo, es solo una imagen, pero esto también sucede con el texto HTML.

Ahora, si tuviera que tomar una captura de pantalla usando mi computadora, ya sea Windows, Mac, Linux, obtendría una captura de pantalla de muy buena calidad que parece completamente real.

Entonces, ¿por qué pasa ésto? Intenté todas las cosas estándar como configurar la captura de pantalla con la mejor calidad en cada biblioteca y configurar una ventana gráfica lo suficientemente grande para que la captura de pantalla tenga una resolución decente. ¿Es esta realmente la mejor calidad que puede obtener de una captura de pantalla del navegador sin cabeza?

Cualquier iluminación en esta área sería apreciada. ¡Gracias!

Obtendrá mejores resultados configurando el deviceScaleFactor a 2 (también conocido como emular 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' })
})();

Como puede ver, puede obtener resultados muy decentes:

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