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

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?

Joshua Carmody

Posted 2010-03-15T19:12:35.723

Reputation: 1 307

You might try to switch the dpi setting of your OS. I believe in windows 8 it requires changing a registry value. While this gives you a giant desktop, the fonts of course also scale so you have to strain your eyes more to read text. – jiggunjer – 2015-05-17T18:21:12.490

Answers

105

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

Snark

Posted 2010-03-15T19:12:35.723

Reputation: 30 147

@snark - Well, that almost worked. But it seems that the Web Developer extension won't let me make the viewport bigger than my screen...? – Joshua Carmody – 2010-03-16T15:27:37.837

@Joshua : it works fine for me. I tested before posting my answer. I made a new test but couldn't find where to host such a big image – Snark – 2010-03-16T15:36:49.690

1Update: The can't-make-a-window-bigger-than-the-screen problem appears to be a limitation imposed by the Windows OS itself. – Joshua Carmody – 2010-03-16T15:37:49.127

@snark - Do you mind if I ask what OS you're running? – Joshua Carmody – 2010-03-16T15:38:20.123

@Joshua: Windows 7 64-bits (with ATI Radeon HD 5670) – Snark – 2010-03-16T15:39:56.857

See here: http://picasaweb.google.be/lh/photo/vgFRypaa2Yf7LSzq-E5D4Q?feat=directlink

– Snark – 2010-03-16T15:46:11.070

2@snark - Ah. Maybe it's a Windows XP thing (that's what I'm stuck with here). In any case, I can work around it by using FireBug to insert a DIV with style="width: 4000px; height: 3000px;" into the HTML code, and then using FireShot, so I'm still good. Thanks for pointing out FireShot. That makes me life a lot easier. I had been scrolling around and taking screenshots than compositing them manually before. It was a MAJOR PAIN. – Joshua Carmody – 2010-03-16T15:50:44.680

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

Damon

Posted 2010-03-15T19:12:35.723

Reputation: 4 002

1The screenshot button may not work properly when you're simulating hi-dpi images by zooming in. In that case, open the developer toolbar Shift + F2 and paste screenshot --clipboard --fullpage into the "console". This is different than the regular JS console. – blade – 2016-09-17T16:23:12.597

This also works with the chrome developer console device testing mode. The screenshot option is in the drop down menu in the top right. – Tully – 2017-08-25T18:45:50.660

Unfortunately this doesn't seem to work in Chrome; I just tried to take a full-viewport screenshot in Chrome of a Microsoft Flow (since the Flow won't display properly in Firefox, even though Firefox' full-viewport screenshot method works) and it only took a screenshot of the currently viewed space... in other words, there was no difference between Chrome's "capture screenshot" and "capture full-size screenshot" options... bummer. – TylerH – 2018-07-11T15:38:53.877

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.

Arjan

Posted 2010-03-15T19:12:35.723

Reputation: 29 084

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.

Zooks64

Posted 2010-03-15T19:12:35.723

Reputation: 1 938

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

Wayne Piekarski

Posted 2010-03-15T19:12:35.723

Reputation: 149

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.

Ronald Pottol

Posted 2010-03-15T19:12:35.723

Reputation: 641

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

svick

Posted 2010-03-15T19:12:35.723

Reputation: 899

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

titusfx

Posted 2010-03-15T19:12:35.723

Reputation: 161