Take High-Resolution (HD) Screenshots in Chrome

Are you tired of having screenshots that do not fit the required resolution? This tutorial will teach you a secret to capturing high-resolution screenshots.

Take High-Resolution (HD) Screenshots in Chrome
Photo by Rubén Menárguez / Unsplash

Have you ever wanted a screenshot of something for sharing but the quality is just not that good enough to fit where it is required?

Normally screenshots tend to take the resolution of the screen display which at times is not enough. You might need something more clear and less blurred, well this article is going to help you get those HD Screenshots.

Just to mention, this tutorial is for desktop or laptop computers. Will definitely find a separate solution for those mobile devices.

So the first thing to do is to hit F12 on that keyboard or simply right-click and select inspect.

Took the image above after hitting F12 while coming up with this piece.

Don't worry about all that code.  We are certainly not going to be touching it. Even if we do, it will not break anything 😂.

Ever wondered how Developers create and test mobile-responsive content?

Use the toggle device option to switch between mobile and desktop views.

See how that changes?

So now, instead of using the pre-sets, we will be creating our High-Resolution screen display to screenshot.

To do that, open the screen-type dropdown

Then select Edit (at the bottom).

Then click on Add Custom Device.

This is where the magic works.

Pick a name for your device, perhaps like Surveyor-Jr HD, then choose 1920 x 1080 as the resolution.

The important part now is the Device Pixel Ratio (DPR). Whatever number we place in there, will multiply the resolution.

So placing something like 4.0, will result in us having a width of:

Screenshot Width: 1920 * 4 = 7680 Pixels and Screenshot Height: 1080 * 4 = 4320 Pixels.

This will give us a resolution of 8K.

The last step is to change the device from mobile to desktop and we are done.

Return to the Screen-Type selection screen and select our new device (Surveyor-Jr HD in this case).

Notice the three dots that appear slightly to our right side?

Click on the three dots and select Capture Screenshot. Just make sure you are on the page you would like to capture.

The image will download to your device and that's it.

Check the details of the screenshot taken during this tutorial.

Now you can try it on your own and see the magic.

💡
This method helped me during a submission in which an HD image was required. I will be announcing which submission in the following months. 

Enjoy! Download my screenshot and see for yourself.