How to Take Ultra High Resolution Screenshots in Chrome (4K, 8K, …)

A screenshot of my website in 8K resolution (opened in an image viewer)

As a publisher, video creator or web developer you might need screenshots of a website, that have a higher resolution than your physical monitor. For example if you have a 1920 x 1080 (full HD) monitor, but you want your screenshots to be in 4K (3840 x 2160) or even 8K (7680 x 4320).

With traditional methods of taking a screenshot like Snipping Tool however, you can only take screenshots that have the same resolution as your monitor. But Google Chrome itself actually has a built-in functionality to capture higher resolution screenshots. In the following tutorial I will show you how to make use of it:

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 (at the arrow) 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.

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!

Bonus

If you select “Capture full size screenshot” in the menu instead, a screenshot of the entire website (from header to footer) will be created. This is useful, when you want to archive how a website looked at a certain point in time.

If anything is unclear or doesn’t work, just ask a question in the comments. I’ll reply to you as soon as possible.

45 Comments
Inline Feedbacks
View all comments
Miko
April 6, 2021 11:35 pm

Great! Nevertheless, screenshots still (and always) will be 72ppi!

Travtek
March 22, 2021 2:38 am

Great hack, David! One thing people are tripping up on is the three vertical dots. Most people are accustomed to seeking the icon at the far right of the screen.

Please put a red arrow on the full screenshot you took just above the ‘That’s It!’ comment you wrote in the article to help point to the correct three-dotted vertical icon.

Cheers from The Colorado Rocky Mountains,

Travtek

ATHISH
March 10, 2021 1:37 am

THANKS SOOO MUCH …LOVED THIS TECHNIQUE:))

Mehran
March 4, 2021 8:40 am

Thanks a lot, save much time for me 😉

space
March 3, 2021 8:21 pm

I’ve added the device but when I hover over the Toggle device bar icon , it doesn’t show any devices or the option to take a screenshot.

Abdul
March 2, 2021 2:55 am

very easy to follow, epic

koko
February 27, 2021 12:36 am

Doesn’t work.

GAURAV
February 25, 2021 7:28 pm

For all my life, I have using snipping tool/mspaint to capture screenshots, which are just low on resolution. That’s just an awesome hack David. Thank you for sharing

iv
February 18, 2021 9:34 am

Thank you!!!

Nora
February 11, 2021 7:55 pm

Thank you for sharing so clearly! Great advice 🙂

JA
February 6, 2021 6:14 pm

Thanks!

Thomas
February 6, 2021 12:56 am

THANK YOU!!!!

Alvin
January 15, 2021 8:54 am

What’s a useful article. Thank you very much!!!

Valery
January 14, 2021 4:10 am

You are a genius. Thank you very much !!!!!

REi
January 12, 2021 5:24 am

Theres now screen capture on my triple dot settings

Ravius
December 20, 2020 1:50 am

Dud, I’ve been trying to figure out how to do this for it seems like ages! Thank you and all the best karma points to you! Even though you’re a dude , I’d still give you a big wet smacker on the forehead LoL!

Ravius
December 20, 2020 1:51 am
Reply to  Ravius

Dude. damn auto-correct LoL!

8lec
December 14, 2020 8:54 am

This is freaking amazing. thx

Susie
December 10, 2020 6:52 pm

OK…maybe I’m missing something, but my F12 button is my volume button…should I do something like tab before??

Susie
December 10, 2020 7:32 pm
Reply to  Susie

Never mind, I found it…you right click on your Mac and it will appear…

screenshooter
December 5, 2020 1:04 pm

man this man is a genius, he needs a nobel price

Anderson
December 2, 2020 11:25 pm

AMAZING!!! Thank you so much. It made my day.

aravind
November 22, 2020 3:20 pm

thanks you very much

Arie
November 21, 2020 6:46 pm

Saved my day!
Thank you

Mat
November 18, 2020 4:16 pm

also works in opera as it is based on chrome now

Mo
November 16, 2020 7:18 am

Thanks David this article is very useful indeed and it works 🙂 – can I capture a particular area of a webpage in 8K?

Ashley
October 14, 2020 4:03 am

This is great. Thank you very much!

Ryan
September 28, 2020 5:41 pm

Is it possible to capture the contents of dropdown or hover menus using this same technique?

David Augustat
September 29, 2020 10:19 pm
Reply to  Ryan

Yes, it is possible. A little extra work is required though:

For dropdown menus that stay open when clicked this is pretty easy:
Just click the menu to open it, then do everything that I explained in the instructions. (But make sure that you don’t click anywhere on the webpage until the screenshot has been captured; otherwise the menu will close.)

For hover menus that only open while hovered this is a bit trickier but still possible:
Hit F12 to open the developer menu. Then RIGHT CLICK the hover menu you want to open. This causes the hover menu to stay open even when not hovered anymore. Then capture the screenshot as explained in the instructions. (But again, make sure not to click anywhere else on the website until the screenshot has been captured. Otherwise the menu will close.)

If anything is unclear, just ask.

Lisa
January 26, 2021 1:21 am
Reply to  David Augustat

Hi David, by any chance is there a workaround for Mac users? If I right click to hold the hover, I lose it as soon as I try to open the menu to take the screenshot. The same happens in reverse too — if I open the menu first and then right click on the hover item, the menu closes. Thanks! 🙂

Kel
September 22, 2020 7:00 am

Thank you – this is perfect 🙂

Zandra
September 10, 2020 11:01 am

Thank you so much!!!!

Manuel
September 7, 2020 3:19 am

Wow! This is a real High Resolution Screenshot!! The best method on web by far!
You are awesome David!!
Thanks a lot!!!

Edmund Atara
August 27, 2020 1:35 pm

Thank you for your blog.

Konstanitn
August 13, 2020 10:52 am

Thanks bro, it really works <3

Mano
April 8, 2020 5:14 pm

thx a lot! sehr gut beschrieben !