HD screenshot in headless Chrome and Firefox

Increase pixel density of screenshots via CLI and code
Published 2024-03-16 • 4 min read
HD screenshot in headless Chrome and Firefox

Let’s make some HD screenshots with headless browsers.

Why? Because depending on your system settings, the resulting screenshot might be pretty pixelated, and we want to do better than that.

The trick lies in increasing the resolution of the screenshot directly, rather than messing around with the window size. This approach ensures that you get a high-quality image without the need for post-processing or dealing with oversized browser windows that can be a hassle to manage and might not even capture the web page as intended.

Let’s look at how we can achieve high-quality screenshots from the command line or via code with Chrome or Firefox.

Chrome Headless Command Line

Getting high-resolution screenshots with Headless Chrome is straightforward:

chrome --headless --force-device-scale-factor=2 --screenshot https://devprogrammer.com

Here, --force-device-scale-factor is the key. It scales each pixel of the website by the specified factor. You can use floats and integers (0.5, 1.5, 2, 5), giving you flexibility in the level of detail for your screenshots.

By default, Chrome saves the screenshot as screenshot.png in the current working directory. Want a different name or location? Modify the --screenshot option:

chrome --headless --force-device-scale-factor=2 --screenshot=img.png https://devprogrammer.com

This command changes the default filename to img.png, helping you keep your screenshots organized.

Programatic screenshot with Chrome Headless

Of course if you want to do this at scale programatic approach is much better. All major testing tools like Cypress or Selenium WebDriver and even browser interfaces like Ferrum support capturing screenshots.

If the underlying browser you use is Chrome, the key is to set the force-device-scale-factor in the browser settings before taking a screenshot.

Here’s the gist:

  1. Initialize your browser with specific options.
  2. Include force-device-scale-factor in those options.
  3. Take your screenshot as usual.

This method works across different tools because Chrome handles the scaling. It doesn’t matter if you’re using Cypress for testing or Selenium for scraping; the principle is the same.

Example with Selenium WebDriver

from selenium import webdriver

options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--force-device-scale-factor=2')

driver = webdriver.Chrome(options=options)
driver.get('https://devprogrammer.com')
driver.save_screenshot('high_res_screenshot.png')
driver.quit()

This Python snippet uses Selenium WebDriver to launch headless Chrome. By setting --force-device-scale-factor=2, the screenshot resolution is doubled, capturing more page details.

Firefox

Firefox doesn’t have a direct command like Chrome for high-res screenshots. But it’s possible with code. Firefox has very similar option to Chrome, but it’s accessible via Firefox Profile. Selenium has convinient API that allows you to modify various preferences of browser’s profile.

Let’s look at the example in Python:

from selenium.webdriver.firefox.options import Options
from selenium.webdriver.firefox.firefox_profile import FirefoxProfile

options=Options()
firefox_profile = FirefoxProfile()
firefox_profile.set_preference('layout.css.devPixelsPerPx', '2.0')
options.profile = firefox_profile

driver = webdriver.Firefox(options=options)

and more elegant example in Ruby:

require 'selenium-webdriver'

options = Selenium::WebDriver::Firefox::Options.new
options.add_argument('--headless')
options.add_preference('layout.css.devPixelsPerPx', '2.0')

driver = Selenium::WebDriver.for(:firefox, options: options)

For Firefox, the key is adjusting layout.css.devPixelsPerPx to desired value, in our case to 2.0. This doubles the pixel density, sharpening your screenshots. After setting up your browser with these options, you’re ready to take high-definition screenshots, just like before:

driver.get('https://devprogrammer.com')
driver.get_screenshot_as_file('screenshot.png')

And that’s it! Whether you’re using Chrome or Firefox, command line or code, you now know how to capture web pages in high definition.

#cli #testing