Dev Blog

karriere.at developers blogging about hacking and science

How to take a high-DPI full page screenshot in Google Chrome

Whether you want to ask for design feedback from your colleagues, inspect changes between versions, use them in your presentation slides or your marketing folders: There are quite a lot of use-cases for screenshots of your web page. This blog post shows how to take high-DPI full page screenshot right inside of Google Chrome.

You don’t need to install additional tools or have ever used the Chrome Developer Tools before. This post is specifically written for marketing and product managers, but designers and developers might find it useful as well.

When you’ve read the post you’ll be able to take screenhots like the following screenshot of a company profile, which has 4080 × 9744 px in its full version:

Overview

There are three steps, which are simple and easy to remember as soon as you’ve done them once:

  1. Access the device toolbar in the Chrome Developer Tools
  2. Adjust the viewport size and device pixel ratio
  3. Capture a full size screenshot

Access the device toolbar in the Chrome Developer Tools

The easiest way to open the Chrome Developer Tools is by using a keyboard shortcut:

  • Ctrl + Shift + I on Windows
  • Command + Option + I on Mac OS

The I stands for “inspect”, if you need a mnemonic. But you can also click the Chrome menu at the top-right of your browser window and select Tools > Developer Tools.

The Chrome menu is probably in your local language, but you should be able to figure out what menu items are identical to Tools > Developer Tools. 😉

Once you’re in the Chrome Developer Tools you can click the Toggle device toolbar button, which is shown in blue in the following screenshot:

Your page will now be shown in an extra window and the device toolbar appears at the top of your viewport.

Adjust the viewport size and device pixel ratio

If you’ve never opened the device toolbar before, the DPR setting is probably hidden.

To add this dropdown you’ll have to click the three vertical dots at the top-right of the device toolbar. In the menu you can then select Add device pixel ratio.

If you have all the controls you can select the following settings in the device toolbar:

  • Viewport controls: Responsive
  • Viewport size: Choose whatever width you’d like. The height isn’t important, just choose any value.
  • Device pixel ratio: Highest

Capture a full size screenshot

Once you’ve setup the viewport you’ll have to click the three vertical dots again and select Capture full size screenshot.

Please wait while the browser takes a full page screenshot, when it’s done it will automatically start a download of your image.

The resulting image in my example has 4080 × 9744 px in its full version:

If I zoom in on the cards in the center of the page I can see, that the image has a high resolution. It should be sufficient for print as well.

Manuel

Manuel is Lead Web Developer at karriere.at, lecturer at the University of Applied Sciences Upper Austria and writes about Front-End Development, Games und Digital Art on his personal blog manu.ninja.
@manuelwieser

5 Features der Chrome Developer Tools, die du unbedingt verwenden solltest!

Introducing: jobs.at

Ship it – Schiffchenbauen