8

I've been using Firefox's built-in CLI to take screenshots of webpages, so that I don't have to use any third party tool.
It is really simple to do,

  • Hit Shift + F2
  • Type screenshot filename.png , then Enter.

To take the screenshot of the whole page (including those parts that are not visible), you just have to add --fullpage to the end of the above command.
Here's where the problem is, when I take the fullpage screenshot of a large page, the quality isn't high enough that it becomes pixelated or the text is not legible when zoomed in.
Is there any way to increase the quality of the screenshots without using any third party tool?
Related Questions:

I'm using Windows 7 and the latest update of Firefox, if that matters.

Improve this question
4
  • I use a plug-in called Awesome screenshot for Firefox to take full page screeshot. I know it's not native, but if you can't find an answer to this, i think it might b a good alternative
    – Lex
    Jun 13, 2016 at 15:09
  • I'm not able to replicate the problem, although I'm doing the procedure in Linux rather than Windows, which may point to something diagnostic. It gives me a pixel for pixel output of what would have been rendered if the screen was big enough; no degraded quality.
    – fixer1234
    Jun 14, 2016 at 1:27
  • @fixer1234 I'm talking about takin' screenshots of texts, which when zoomed, will get pixelated and becomes a bit difficult to read
    – RogUE
    Jun 18, 2016 at 11:57
  • My understanding is that text is rendered with a dedicated system for intelligently smoothing the characters (at any zoom), based on font information. Once you take a screenshot, the font information is lost, it's just pixels. The zoom function does some interpolation, but the quality of that process can't match the job that's possible when the characters are rendered as characters.
    – fixer1234
    Jun 18, 2016 at 14:59

1 Answer 1

Reset to default
12

Finally, I found the answer to my question. I 'd love to answer my questions.

First of all, where the credit due; Eric's Archived Thoughts, I found this tutorial accidentally.

The answer is simple, just add a --dpr option/argument to the command with the relative pixel resolution to the normal. Say, for example, to capture at 4 times the resolution of the normal resolution put --dpr 4, note that there's a space before the number. You may also use numbers with decimal parts like 5.3, 5.6 etc. An example command may look like: 

screenshot filename.png --dpr x

That's all.

And of course, there's improvement in the quality of the screenshots.

Example screenshots:

At normal resolution Normal Resolution

At 5x resolution At 5x resolution

Improve this answer
4
  • Nice find! dpr (device pixel ratio), captures how the display would have been rendered if the monitor had a different resolution. Rather than capturing and then interpolating a fixed image to enlarge it, this does the font smoothing at the target resolution.
    – fixer1234
    Sep 27, 2016 at 20:53
  • 1
    Please check this answer too.
    – RogUE
    Mar 27, 2018 at 15:24
  • Sadly the CLI has been removed with Firefox 62: ghacks.net/2018/05/21/firefox-62-developer-toolbar-removal
    – Marcus Riemer
    Sep 17, 2018 at 16:38
  • 3
    From Firefox 63 on, you can use :screenshot (note the colon) from the web console (Tools -> Web Developer -> Web Console, or Ctrl + Shift + K / Cmd + Option + K)
    – Calimo
    Oct 16, 2018 at 7:06

You must log in to answer this question.

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