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

How to Take a Screenshot with Google Chrome

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

One of the clients that 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 OnSemble migrate their Intranet solution out of their parent company's website. It was an extensive project that incorporated everything from building out new social profiles, updating Marketo, and then disassembling some of the custom development that they'd done in the past to combine their sites.

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, it's not a very well-known feature despite it having amazing flexibility.

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 have the option to 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 happens to also be a perfect way to get a perfectly sized screenshot of a web page.

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

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

Developer Tools Menu with Google Chrome

  1. Select More Tools > Developer Tools

Developer Tools with Google Chrome

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

Toggle Device Toolbar With Google Chrome

  1. 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.

Responsive Device Toolbar Google Chrome

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

Capture Screenshot with Google Chrome

  1. 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 screenshot since that will take the entire length of the page and ignore your height limit.

Google Chrome Keyboard Shortcuts for Screenshots

If you're a keyboard shortcut master, you can also just 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 needed an entire page's screenshot.

Keyboard Shortcuts on a Mac:

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

Keyboard Shortcuts on in Windows or Linux:

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

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.