How to make screenshot from a responsive design rendering without having it scaled by zoom?

I need a screenshot from our web application. It will go on a printed poster, so I need it in a high DPI version. I have a 96 DPI monitor, so a standard screenshot pixelates when printed. My solution to this problem was to

Calculate the pixel number I need such that the picture can be printed in 300 dpi in the size I need
set the Responsive Design tool in Firefox to exactly that size viewport, say X by Y pixels
zoom with Ctrl + + until the needed design elements filled the view (that part is important - the solution needs to work when the content is zoomed in or zoomed out)
use the built-in screenshot tool to make a screenshot.
use GIMP to change the image resolution to 300 dpi without changing the actual number of pixels

To my surprise, the screenshot was not X by Y pixels, but a smaller size, for example 0.67X by 0.67Y, so I could only get a 200 dpi image without scaling it up. The factor also varied. After playing around, I found out that the size of the screenshot is determined by the level of zoom.

Using an addon to make the screenshot (Awesome Screenshot Plus) produced the exact same problem. Using Chrome produced a different problem, as Chrome does not render the complete large viewport, and only part of the image is captured. To my knowledge, IE does not have a tool for enlarging the viewport size beyond the physical screen limits.

Do you have any suggestions (browser addons, maybe a different browser?) for a way to take my screenshot? I need a browser to render the page and not something like PageLayouts, because the JavaScript on the application is somewhat involved, and because I have to tweak the HTML and CSS on the fly a little bit.

I am working on a Windows PC and my department does not have the budget to invest in a paid dedicated tool for this task.

Rumi P.

Posted 2016-03-09T16:24:07.973

Reputation: 411

I don't know of a nice way to achieve what you want. But as a last resort, you would want to upscale the image (e.g. using GIMP to change the resolution to 300 dpi (and change its size to the actual print size) with the actual number of pixels increased accordingly, preferably with the bicubic algorithm or lanczos3. – Tom Yan – 2016-03-09T19:17:29.997

@TomYan this doesn't look good. The text smears even when first zoom in the web page and then scale up in GIMP. And when I have to zoom out, so that the text becomes quite small, and afterwards scale up in GIMP, it becomes almost unreadable. – Rumi P. – 2016-03-09T20:15:33.433

I use the demo of this html to svg to get a vector version of web pages to put in posters and similar materials.

– ff524 – 2016-03-09T21:04:20.717

Could you just build a mockup in your favourite image editor? Does it have to be a "live" version? – Burgi – 2016-03-10T09:15:42.027

I think you should have a look at this

– RogUE – 2017-05-13T16:04:02.247

Answers

What worked for me was in firefox I opened the developer console and at the top right I clicked the toolbox options ( looks like a little gear ).

Under 'Available Toolbox Buttons' I checked 'Take a fullpage screenshot'. That made a little camera button appear next to the toolbox options button.

Then in the responsive design mode I set my resolution and then took the screen shot with the fullpage screenshot button. I came out as the correct resolution that I needed.

Note: I know the responsive design feature has a screenshot button but for me when I would take the screenshot the resolution did not come out to what I had set.

Saloaty

Posted 2016-03-09T16:24:07.973

Reputation: 21

It's only possible with a Firefox addon called Pearl Crescent Page Saver where you enter 200 or 300 to the % value in the marked setting. It'll zoom the page (not pixelated upscaling), and take a screenshot that is 2-3x bigger than what your viewport is. I used it to make print friendly 300-600dpi resolution screenshots of websites and it turned out to be awesome (especially if the site was retina ready, otherwise only CSS lines, corners, fonts etc. were scaled nicely).

I'm in the process of searching for an alternative for Chrome. I accidentally found this plugin for Firefox but it looks a bit abandonware and it doesn't work on latest versions anymore, but older stable Firefox runs it well enough. Might be worth keeping such version around just for this if there is no alternative.

Firsh - LetsWP.io

Posted 2016-03-09T16:24:07.973

Reputation: 99