Sunday, November 29, 2020

How to take ultra high resolution screenshot?

This is very useful esp. when you want to use a high-resolution screenshot for a poster/printout. I currently don't find a way in Safari to save the screenshot in Responsive Mode. 

See stepwise instructions below from David Augustat's blog: https://davidaugustat.com/web/take-ultra-high-resolution-screenshots-in-chrome

Instructions

Steps 3, 4 and 5 must only be done once. For the second time the process will be much shorter.

Step 1:
Open the website you want to screenshot in a Chrome tab and hit F12 on your keyboard. This will open the developer tools. All the code and stuff that appears might seem intimidating to you if you’re not familiar with web development, but don’t worry. We won’t mess with that and you can’t break anything.

Developer Tools in Google Chrome

Step 2:
Click the “Toggle device bar” icon in the top left corner of the developers pane. 

How to open device toolbar in Google Chrome

The view that appears now is a mode which helps web developers to test their websites on different screen sizes. The default screen size is “Responsive” but you can also choose other screen types in the dropdown menu.

The device preview of Google Chrome developer tools

Step 3:
However, we won’t use any of the presets but create our own screen type instead. Open the screen type dropdown menu and select “Edit…”.

Device Drop Down Menu in Google Chrome developer tools.

Step 4:
A new sidebar will appear which lists several phone models that can be used as screen types. We however can ignore them, and instead click on the “Add custom device…” button.

Add a custom device in Google Chrome developer tools

Step 5:
Now fill in the details for the new screen device. Pick a name like “HighRes Screenshot” and choose 1920 x 1080 as a screen resolution. Don’t worry, this won’t be the resolution of our screenshots but only determines the size of the text and the elements on the website. The screenshots will have a much higher resolution.
Now comes the important part: Choosing a device pixel ratio (DPR). The DPR determines the resolution of our screenshots in following way:
Screenshot width = 1920 * DPR
Screenshot height = 1080 * DPR

So the DPR acts as a resolution multiplier. When we choose the DPR to be 4.0 for example, the screenshot resolution will be:
Width: 1920 * 4 = 7680 Pixels
Height: 1080 * 4 = 4320 Pixels
which is the resolution of 8K. Finally, change the device type from “Mobile” to “Desktop” an click the “Add” button to create your screen device.

How to configure a custom device in Google Chrome developer tools

Step 6:
Now select your new device in the screen type drop down menu. This will render the website with the properties of the device.

Selecting the newly created custom device for preview in Google Chrome developer tools

Step 7:
To take the screenshot, click on the three dots at the top right side and select “Capture screenshot”

Capturing a high resolution screenshot using Google Chrome developer tools

Depending on your machine it will take several seconds for Chrome to render the screenshot. When everything is done, the screenshot will be saved to your download folder.

The captured screenshot being downloaded.

That’s it!

You’ve just created an 8K screenshot of a website. Check the image properties if you don’t believe me. Or download the screenshot here.

Image properties of the high resolution screenshot, that I just took

The screen device you created, will be stored in your browser and you don’t need to recreate it every time. Next time you want to take a high resolution screenshot, just hit F12, click the “Toggle device bar” icon, select your screenshot device and hit “Capture screenshot”. That’s a matter of 10 seconds!

No comments:

Post a Comment