Tech tip : How to Take High-Quality & Full-Size Screenshot From Web Browser

A Guide on How to Take High-Quality Screenshots

Whether you want to make a screenshot from websites to show in your presentation slides, marketing folder, or preparing for your books, journal articles, etc. Many times, you would need a high-quality printable image from websites. Some of you might do this but just taking a regular screenshot and using image processing software to enhance your image quality.
This article introduces how can you take high-resolution/full-size screenshots right inside your Chromium-based web browsers such as Google Chrome/Microsoft Edge without any extension needed.

Step 1: Open the Inspect Window

Just browse to any webpage you want to take a screenshot and open the Inspect mode by right-clicking anywhere and select “inspect”.

Step 2: Toggle Device Toolbar

The inspect window will pop up. At the top-left of this window, please click on the “toggle device toolbar” button.

Then, click on the three-dot menu on the top-right of the viewport and select “Add device pixel ratio”. This option will allow you to increase the device pixel ratio (DPR) for higher resolution later.

Step 3: Adjust the Viewport Size and Device Pixel Ratio (DPR)

Then, you may adjust the viewport size and device pixel ratio (DPR). For the viewport, I recommend to set the viewport option to “Responsive” and you may drag at the corner of the viewport to adjust to the size you want most.

For the DPR value, according to Google, a DPR 2.0 asset will continue to look sharp when you keep zooming in, while a DPR: 1.0 asset will look pixelated. Please set the DPR to 3.0 if you want a high-resolution result!

Step 4: Capture Screenshot

After you set the desired viewport size and DPR, then click on the three-dot menu again and select “capture screenshot” to capture the presented content on the viewport or select “capture full-size screenshot” to capture full size of the web page.

Conclusion:

This article introduces how to take a high-resolution & full-size webpage screenshot by showing an example of taking a screenshot from Medium.com on Google Chrome browser. You may apply this technique to other chromium browsers such as Microsoft Edge as well. I hope you enjoy this article and can apply this technique to your work.