How can I take browser screenshots at a higher resolution than my browser supports?

Question

I need to take a screenshot of a website as it would appear on a very high resolution monitor... say 4000x3000 pixels. My laptop's screen has a native resolution of 1400x768. Basically, I need to simulate having a monitor resolution much higher than my monitor and video card actually supports. I want the screenshot of the site to look pretty much how it does when you hit CTRL MINUS (zoom out) in Firefox repeatedly, but without any loss of pixels due to scaling. How can I do this? Is there some way to use virtual machine software to simulate a super-high-res display? If not, is there some way to open a browser window bigger than the screen, and then capture its contents as a PNG somehow? Anything else that might work?

score 107 · Accepted Answer · edited Sep 15 '11 at 05:16

You can do it with Firefox and 2 extensions: Web Developer and FireShot.

Once both extensions are installed, go to Tools - Web Developer - Resize - Edit Resize Dimensions... .

Add a new size, 4000 x 3000. check "Resize the viewport" if you want only the page content to be 4000x3000. If you don't check it, the complete window of Firefox (with toolbars, menu, ...) will be set to this dimension.

alt text

Once at the correct size, go to Tools - FireShot - Capture Entire Page and ... . Select an action, like Save for instance. It will save the page content that has been set by Web Developer to the desired size.

alt text

score 21 · Answer 2 · answered Jun 22 '15 at 11:59

Meanwhile (for at least a year or two -- since version 15, if I am not mistaken), Firefox supports this directly via the integrated developer tools.

Either hit CtrlShift M or select Responsive Design View from the Developer Tools icon in the stripe menu.

That will bring up this view, which will let you choose from a set of presets as well as enter any desired resolution and directly save a screenshot in PNG format to disk with one click:

enter image description here

score 9 · Answer 3 · edited Mar 20 '17 at 10:04

9

On a Mac, Paparazzi can help, either using its GUI or using a URL syntax like:

paparazzi:(width=4000,height=3000,maxheight=3000)How can I take browser screenshots at a higher resolution than my browser supports?

enter image description here

The URL syntax can easily be turned into a bookmarklet. Paparazzi uses the WebKit rendering engine.

edited Mar 20 '17 at 10:04

Community

1

answered Jun 10 '10 at 21:58

Arjan

31,511

score 6 · Answer 4 · answered Mar 15 '10 at 22:20

6

I use a FireFox add on called Abduction to create a .png shot of a webpage in its entirety. Unfortunately that add on hasn't been updated to be compatible with FireFox 3.6 yet.

Looks like ScreenGrab will do the same thing.

answered Mar 15 '10 at 22:20

Zooks64

2,060

score 5 · Answer 5 · edited May 11 '18 at 12:33

5

Well, with a Linux (or X Window System setup of any flavor) you can set a virtual desktop that is larger than your monitor. You scroll around in it, but I would think you could then maximize your browser and screen shot it.

I don't know if there is a way to do it in Windows or OS X.

edited May 11 '18 at 12:33

I say Reinstate Monica

26,651

answered Mar 15 '10 at 21:12

Ronald Pottol

651

score 5 · Answer 6 · answered Aug 17 '14 at 02:55

Firefox 16 onwards now contains the ability to control the size of the viewport with the developer console:

Open up Tools ... Web Developer ... Developer Toolbar

Resize viewport with this command:

resize to 5000 5000

Screen capture with this command:

screenshot output.png

score 3 · Answer 7 · answered Jun 07 '10 at 13:51

3

I find using online services like thumbalizr easier than installing browser plugins, if you don't need to do this often.

answered Jun 07 '10 at 13:51

svick

927

score 1 · Answer 8 · edited Dec 29 '15 at 13:11

1

In Chrome there are severals extensions such as:

Fire Shot
Webpage screenshot (didn't work with me, maybe has a bug right now)

There's another Webpage screenshot but I don't have reputation enough to publish more than two links

edited Dec 29 '15 at 13:11

kenorb

26,615

answered Dec 29 '15 at 12:50

titusfx

221

score 0 · Answer 9 · answered Feb 22 '23 at 15:28

If you simply want to take a screenshot at a higher resolution in Firefox, you can also do this via the console:

:screenshot --dpr 4 will create a screenshot with 4 times your current resolution (dpr stands for device-pixel-ratio). The full documentation of the other options available is here.

Note that a larger screen (or viewport, more precisely) may still yield a different result, if the web site reacts to the size or pixel density, through CSS or Javascript.

score 0 · Answer 10 · answered Jan 13 '25 at 02:54

Chrome (no extensions needed)

Open chrome inspector

Enable device toolbar view
Select the device dropdown
Click Edit
Inside "Emulated Devices" section, click "add custom device"
Here you can set the resolution, I wanted 4k so I set 3840 x 2160
Once the device is added, select it from the dropdown from step "2" above
Then from the top right section click on the "3 vertical dots" dropdown
Select "Capture full size screenshot" from the dropdown that appears.

How can I take browser screenshots at a higher resolution than my browser supports?

10 Answers10

Linked

Related