How to Take a High-DPI Website Screenshot in Firefox

After relaunching Dr. Link Check (our broken link checker service) last month, we needed some high-res, high-quality screenshots of the website for promotional purposes. Typically, when in need of a quick screenshot I use the nifty Firefox Screenshots feature by right-clicking on the page and choosing Take a screenshot. This time, however, I needed screenshots with a higher pixel density than my non-Retina display supports. After some googling, I found an easy way to take high-DPI screenshots via the Firefox Web Console.

  1. Open the Web Console by pressing Ctrl-Shift-K (Cmd-Option-K on macOS).
  2. Type the following command: :screenshot --dpr 2
  3. Press Enter.

This results in a screenshot of the currently visible area being saved to the Downloads folder (with an auto-generated filename in the form of "Screen Shot yyyy-mm-dd at hh.mm.ss.png"). The --dpr 2 argument causes Firefox to use a device-pixel-ratio of 2, capturing the screen at two times the usual resolution.

Web Console

If you want to take a screenshot of the full page, append --fullpage to the command. Here's the full list of arguments you can use:

  • --clipboard Copies the screenshot to the clipboard
  • --delay 5 Waits the specified number seconds before taking the screenshot
  • --dpr 2 Uses the specified device-to-pixel ratio for the screenshot
  • --file Saves the screenshot to a file, even if the --clipboard argument is specified
  • --filename screenshot.png Saves the screenshot under the specified filename
  • --fullpage Takes a screenshot of the full page, not just the currently visible area
  • --selector "#id" Takes a screenshot of the element that matches the specified CSS query selector

Unfortunately, there isn't (yet?) a command for taking a screenshot at a specified window or viewport size. A good workaround is to open the page in Responsive Design Mode in Firefox:

  1. Activate Responsive Design Mode by pressing Ctrl-Shift-M (Cmd-Option-M on macOS).
  2. Adjust the screen size to your liking.
  3. Take a screenshot as described above.

Older Post Newer Post