Create pixel-perfect screenshots of a web pages using Firefox
Overview
Have you ever wanted to take a screenshot of a web page, but when you tried Print to PDF it came out looking different? As it turns out, if you try to do this with default settings in Chrome, Firefox, or Edge, it may not output your web page to PDF as it appears on the actual web page. Often times, you’ll get displaced, overlapping, or missing elements. In this article, I’ll show you how to easily output a pixel-perfect image of a web page using Firefox.
Browser Plugins
It is possible to download and install a 3rd party browser plugin to help output your web page to PDF. However, installing 3rd party plugins can introduce serious privacy and security risks including compromising your entire computer system. Luckily for us, Firefox has native functionality to help us get the job done, which we’ll look at in the next section.
Instructions
- Open Firefox and navigate to the web page you’d like to output
- Scroll down to the bottom of the page to ensure that all assets have been loaded on the page
- NOTE: It’s common for websites to use a technique called “lazy loading” where portions of the web page will only be loaded once it comes into the browser’s viewport.
- Press F12 or click the hamburger menu at the top right, go to More Tools, then Web Developer Tools.
- Click the 3 dots, then click Settings
- Scroll to the bottom of the Settings screen and enable the “Take a screenshot of the entire page” option. Then disable the “Screenshot to clipboard only” option.
- To take a screenshot of the web page, click the camera icon as shown in the screenshot below. You should receive a notification that a .png image has been created in your default folder, typically your Downloads folder.
It’s important to note that the “Take screenshot of entire page” option limits the screenshot to a height of 10,000 pixels. If you want to capture more than that, you can disable this option to make the camera button take a screenshot of the viewport only. With this method, you’ll need to start at the top of the page, press the camera button, press Page Down on your keyboard, and repeat until the entire page has been captured. You can combine the screenshot images (.png format) and output as a PDF using a design tool such as Canva.
Conclusion
Being able to export a screenshot of a web page into an image file can be useful for a number of situations. Regardless of your application, you’ve now added a new tool to your toolkit thanks to Firefox‘s screenshot functionality!
