3

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.

  • 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 Mar 9 '16 at 19:17
  • @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. Mar 9 '16 at 20:15
  • 1
    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 Mar 9 '16 at 21:04
  • Could you just build a mockup in your favourite image editor? Does it have to be a "live" version? – Burgi Mar 10 '16 at 9:15
  • 1
    I think you should have a look at this – RogUE May 13 '17 at 16:04
3

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 ). enter image description here

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

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.

1

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.

enter image description here

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.