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.

Improve this question
5
  • 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, 2016 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, 2016 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, 2016 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, 2016 at 9:15
  • 1
    I think you should have a look at this
    – RogUE
    May 13, 2017 at 16:04

2 Answers 2

Reset to default
2

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.

Improve this answer
0
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

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .