How To Take A Website Screenshot With Specific Dimensions Using Google Chrome

If you’re an agency or company with a portfolio of sites or pages you wish to share online, you’ve probably gone through the pain of trying to capture uniform screenshots of each site.

One of the clients we’re working with builds hosted Intranet solutions that can be internally hosted within the confines of a company. Intranets are incredibly helpful for companies to communicate company news, distribute marketing information, provide benefits information, etc.

We helped this client migrate their Intranet solution product from their parent company’s website. It was an extensive project that incorporated everything from building new social profiles, updating Marketo, and then disassembling some of the custom development they’d done to combine their sites.

One critical step was ensuring we had great product shots of their customers’ intranet sites prominent on their new website. We wanted to ensure each screenshot was consistently the same width and height throughout the site. This can be difficult… unless you are using Google Chrome.

Client Screenshots With Google Chrome

You may not realize this, but you can capture perfect screenshots with Google Chrome’s built-in set of robust developer tools. Interestingly, despite its amazing flexibility, it’s not a very well-known feature. The feature also allows you to take shots of your responsive site for specific dimensions and screen sizes.

Here’s a quick video tutorial on how to take a perfect, specifically-sized, screenshot of a web page using Google Chrome:

Steps To Take A Screenshot With Google Chrome

Google Chrome’s Developer Tools can preview a site using its device toolbar. The tool was built so that developers could see how the site looked in different viewport sizes across different devices… but it also happens to be a perfect way to get a perfectly sized screenshot of a web page.

In this case, we want each of the client’s key clients across industries that have built beautiful Intranet sites to take a screenshot so we can display them all within a portfolio on their website. We want the pages to be exactly 1200px wide by 800px tall. To accomplish this:

1. In the far right navigation button (3 vertical dots), select the Customize and Control Menu.

2. Select More Tools > Developer Tools

3. Toggle the Device Toolbar to bring up the device options and dimensions.

4. Set the first option to Responsive, then set the dimensions to 1200 x 800 and hit enter. The page will now display with those dimensions.

4. On the right side of the Device Toolbar, click the navigation button (3 vertical dots) and select Capture Screenshot.

4. Google Chrome will take a perfect screenshot and drop it into your Downloads folder where you can attach and send it in an email. Be sure not to select full-size screenshots since that will take the entire page length and ignore your height limit.

Google Chrome Keyboard Shortcuts for Screenshots

If you’re a keyboard shortcut master, you can take a full-page screenshot with these shortcuts. I don’t like this approach as I can’t set the maximum height of the viewport… but it comes in handy if you ever need an entire page’s screenshot.

1. Alt + Command + I 
2. Command + Shift + P

1. Ctrl + Shift + I 
2. Ctrl + Shift + P