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.

Rumi P.
  • 681

2 Answers2

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.

Saloaty
  • 21
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

Firsh - justifiedgrid.com
  • 180