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.

TylerH
  • 543
  • 1
  • 7
  • 20
RogUE
  • 3,481
  • 9
  • 34
  • 56
  • 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 '16 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 '16 at 01: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 '16 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 '16 at 14:59

1 Answers1

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

Hashim Aziz
  • 11,898
  • 35
  • 98
  • 166
RogUE
  • 3,481
  • 9
  • 34
  • 56
  • 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 '16 at 20:53
  • 1
    Please check [this answer](https://superuser.com/a/930970/400355) too. – RogUE Mar 27 '18 at 15:24
  • Sadly the CLI has been removed with Firefox 62: https://www.ghacks.net/2018/05/21/firefox-62-developer-toolbar-removal/ – Marcus Riemer Sep 17 '18 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 '18 at 07:06