How to take ultra high resolution screenshot?

This article is originally published at http://onetipperday.sterding.com/

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.

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

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.

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…”.

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.

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.

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.

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

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.

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.

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!

Thanks for visiting r-craft.org
This article is originally published at http://onetipperday.sterding.com/
Please visit source website for post related comments.