Can I create high resolution screenshots in Firefox?
up vote
8
down vote
favorite
In Firefox I can create a fullpage screenshot when I go to the web developer toolbar (can be activated in the developer tool settings). Unfortunately, I can do this only with the default resolution. Is there a chance to get images of higher resolution anyhow? With Firefox or an add-on? Or is it possible in another browser?
firefox screenshot high-resolution webpage-screenshot
add a comment |
up vote
8
down vote
favorite
In Firefox I can create a fullpage screenshot when I go to the web developer toolbar (can be activated in the developer tool settings). Unfortunately, I can do this only with the default resolution. Is there a chance to get images of higher resolution anyhow? With Firefox or an add-on? Or is it possible in another browser?
firefox screenshot high-resolution webpage-screenshot
By higher resolution, do you actually mean higher viewport size? If so, use Responsive Design View, and increase the shown dimensions …
– CBroe
Sep 23 '15 at 15:25
@CBroe No. Imagine I would zoom into the image with Firefox and then take a screenshot. Let's say a zoom 200% when the width of the window is 1000px, then I would like to have an image with 2000px. But it should be a fullpage screenshot.
– robsch
Sep 23 '15 at 15:31
Sounds like something that probably should have been filed over on bugzilla.mozilla.org
– Mike 'Pomax' Kamermans
Oct 15 at 17:10
@Mike'Pomax'Kamermans Turns out it was, and got fixed: bugzilla.mozilla.org/show_bug.cgi?id=1464461
– Calimo
Oct 17 at 14:21
add a comment |
up vote
8
down vote
favorite
up vote
8
down vote
favorite
In Firefox I can create a fullpage screenshot when I go to the web developer toolbar (can be activated in the developer tool settings). Unfortunately, I can do this only with the default resolution. Is there a chance to get images of higher resolution anyhow? With Firefox or an add-on? Or is it possible in another browser?
firefox screenshot high-resolution webpage-screenshot
In Firefox I can create a fullpage screenshot when I go to the web developer toolbar (can be activated in the developer tool settings). Unfortunately, I can do this only with the default resolution. Is there a chance to get images of higher resolution anyhow? With Firefox or an add-on? Or is it possible in another browser?
firefox screenshot high-resolution webpage-screenshot
firefox screenshot high-resolution webpage-screenshot
asked Sep 23 '15 at 15:21
robsch
5,46934274
5,46934274
By higher resolution, do you actually mean higher viewport size? If so, use Responsive Design View, and increase the shown dimensions …
– CBroe
Sep 23 '15 at 15:25
@CBroe No. Imagine I would zoom into the image with Firefox and then take a screenshot. Let's say a zoom 200% when the width of the window is 1000px, then I would like to have an image with 2000px. But it should be a fullpage screenshot.
– robsch
Sep 23 '15 at 15:31
Sounds like something that probably should have been filed over on bugzilla.mozilla.org
– Mike 'Pomax' Kamermans
Oct 15 at 17:10
@Mike'Pomax'Kamermans Turns out it was, and got fixed: bugzilla.mozilla.org/show_bug.cgi?id=1464461
– Calimo
Oct 17 at 14:21
add a comment |
By higher resolution, do you actually mean higher viewport size? If so, use Responsive Design View, and increase the shown dimensions …
– CBroe
Sep 23 '15 at 15:25
@CBroe No. Imagine I would zoom into the image with Firefox and then take a screenshot. Let's say a zoom 200% when the width of the window is 1000px, then I would like to have an image with 2000px. But it should be a fullpage screenshot.
– robsch
Sep 23 '15 at 15:31
Sounds like something that probably should have been filed over on bugzilla.mozilla.org
– Mike 'Pomax' Kamermans
Oct 15 at 17:10
@Mike'Pomax'Kamermans Turns out it was, and got fixed: bugzilla.mozilla.org/show_bug.cgi?id=1464461
– Calimo
Oct 17 at 14:21
By higher resolution, do you actually mean higher viewport size? If so, use Responsive Design View, and increase the shown dimensions …
– CBroe
Sep 23 '15 at 15:25
By higher resolution, do you actually mean higher viewport size? If so, use Responsive Design View, and increase the shown dimensions …
– CBroe
Sep 23 '15 at 15:25
@CBroe No. Imagine I would zoom into the image with Firefox and then take a screenshot. Let's say a zoom 200% when the width of the window is 1000px, then I would like to have an image with 2000px. But it should be a fullpage screenshot.
– robsch
Sep 23 '15 at 15:31
@CBroe No. Imagine I would zoom into the image with Firefox and then take a screenshot. Let's say a zoom 200% when the width of the window is 1000px, then I would like to have an image with 2000px. But it should be a fullpage screenshot.
– robsch
Sep 23 '15 at 15:31
Sounds like something that probably should have been filed over on bugzilla.mozilla.org
– Mike 'Pomax' Kamermans
Oct 15 at 17:10
Sounds like something that probably should have been filed over on bugzilla.mozilla.org
– Mike 'Pomax' Kamermans
Oct 15 at 17:10
@Mike'Pomax'Kamermans Turns out it was, and got fixed: bugzilla.mozilla.org/show_bug.cgi?id=1464461
– Calimo
Oct 17 at 14:21
@Mike'Pomax'Kamermans Turns out it was, and got fixed: bugzilla.mozilla.org/show_bug.cgi?id=1464461
– Calimo
Oct 17 at 14:21
add a comment |
4 Answers
4
active
oldest
votes
up vote
8
down vote
In Firefox, I use these tricks :
Shift-F7 (or go to "Tools" menu -> Web Developer -> style editor) and insert these lines to zoom the whole page (here, by 4 or 400% so for example 72dpi becomes 288dpi and we get closer to a printable picture) :
body
zoom: 4; /* change zoom factor here... */
-moz-transform: scale(4); /* ...and here. */
-moz-transform-origin: 0 0;
- then Shift+F2 (or "Tools" > Web Developer > developer toolbar), and, in the little prompt at the bottom :
screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboardYou can also play with the Tools > Web Developer > Responsive Design View (or Ctrl+Shift+M) which allows you to specify custom resolutions and have a nifty button to take the screenshot, but zoom still has to be done manually.
Beware when choosing the zoom factor : Firefox gets grumpy if you try to generate a PNG too big. In very high resolution, you will have to drop the --fullpage option, screenshot fragment by fragment and reassemble in your image editor.
Ref:
got the first trick from How can I scale an entire web page with CSS? : it seems Firefox still has issues with the zoom CSS rule so the -moz-* rules still have to be added, at least until version 38. If this gets corrected in future versions, just specify zoom: NN;.
1
As of Firefox 62, it seems like the Shift+F2 developer tool has been removed.
– pixelistik
Sep 11 at 9:48
add a comment |
up vote
6
down vote
I've found a great answer at superuser using just the right parameter.
In the developer console (open with SHIFT+F2) use:
screenshot filename.png --dpr 4
This will increase screenshot resolution by factor 4.
add a comment |
up vote
2
down vote
Firefox 62 and following
In Firefox 62 and following, the GCLI was removed and the screenshot command was moved to the Web Console and prefixed with a colon.
To take a screen shot at 4 times the native screen resolution, open the web console (Tools -> Web Developer -> Web Console or CtrlShiftK, CmdOptionK on Mac) and type:
:screenshot --dpr 4
The file name is now optional and the console will tell you where the file was saved (typically in 'Downloads' with a system-specific naming scheme).
Additional parameters are available, see the Web Console documentation and Erik Meyer's blog post for more.
An additional note: large DPR values don't always work. There seems to be a limit around 120 megapixels. Larger screenshots will simply not complete and do nothing, silently. If the command does nothing for you, try lowering the dpr or resizing the window, until you get something out.
add a comment |
up vote
1
down vote
Combining the above answers and comments, you can get a decent resolution screenshot of an entire webpage by hitting shift + F2 in Firefox. Then, when the console pops up at the bottom of the screen, input:
screenshot --fullpage --dpr 4 filename.png
On Windows 10, it saves that filename.png to your C:UsersyourusernameDownloads folder by default. To specify you need to double down on backslashes:
screenshot --fullpage --dpr 4 C:\Users\yourusername\path\to\filename.png
add a comment |
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
8
down vote
In Firefox, I use these tricks :
Shift-F7 (or go to "Tools" menu -> Web Developer -> style editor) and insert these lines to zoom the whole page (here, by 4 or 400% so for example 72dpi becomes 288dpi and we get closer to a printable picture) :
body
zoom: 4; /* change zoom factor here... */
-moz-transform: scale(4); /* ...and here. */
-moz-transform-origin: 0 0;
- then Shift+F2 (or "Tools" > Web Developer > developer toolbar), and, in the little prompt at the bottom :
screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboardYou can also play with the Tools > Web Developer > Responsive Design View (or Ctrl+Shift+M) which allows you to specify custom resolutions and have a nifty button to take the screenshot, but zoom still has to be done manually.
Beware when choosing the zoom factor : Firefox gets grumpy if you try to generate a PNG too big. In very high resolution, you will have to drop the --fullpage option, screenshot fragment by fragment and reassemble in your image editor.
Ref:
got the first trick from How can I scale an entire web page with CSS? : it seems Firefox still has issues with the zoom CSS rule so the -moz-* rules still have to be added, at least until version 38. If this gets corrected in future versions, just specify zoom: NN;.
1
As of Firefox 62, it seems like the Shift+F2 developer tool has been removed.
– pixelistik
Sep 11 at 9:48
add a comment |
up vote
8
down vote
In Firefox, I use these tricks :
Shift-F7 (or go to "Tools" menu -> Web Developer -> style editor) and insert these lines to zoom the whole page (here, by 4 or 400% so for example 72dpi becomes 288dpi and we get closer to a printable picture) :
body
zoom: 4; /* change zoom factor here... */
-moz-transform: scale(4); /* ...and here. */
-moz-transform-origin: 0 0;
- then Shift+F2 (or "Tools" > Web Developer > developer toolbar), and, in the little prompt at the bottom :
screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboardYou can also play with the Tools > Web Developer > Responsive Design View (or Ctrl+Shift+M) which allows you to specify custom resolutions and have a nifty button to take the screenshot, but zoom still has to be done manually.
Beware when choosing the zoom factor : Firefox gets grumpy if you try to generate a PNG too big. In very high resolution, you will have to drop the --fullpage option, screenshot fragment by fragment and reassemble in your image editor.
Ref:
got the first trick from How can I scale an entire web page with CSS? : it seems Firefox still has issues with the zoom CSS rule so the -moz-* rules still have to be added, at least until version 38. If this gets corrected in future versions, just specify zoom: NN;.
1
As of Firefox 62, it seems like the Shift+F2 developer tool has been removed.
– pixelistik
Sep 11 at 9:48
add a comment |
up vote
8
down vote
up vote
8
down vote
In Firefox, I use these tricks :
Shift-F7 (or go to "Tools" menu -> Web Developer -> style editor) and insert these lines to zoom the whole page (here, by 4 or 400% so for example 72dpi becomes 288dpi and we get closer to a printable picture) :
body
zoom: 4; /* change zoom factor here... */
-moz-transform: scale(4); /* ...and here. */
-moz-transform-origin: 0 0;
- then Shift+F2 (or "Tools" > Web Developer > developer toolbar), and, in the little prompt at the bottom :
screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboardYou can also play with the Tools > Web Developer > Responsive Design View (or Ctrl+Shift+M) which allows you to specify custom resolutions and have a nifty button to take the screenshot, but zoom still has to be done manually.
Beware when choosing the zoom factor : Firefox gets grumpy if you try to generate a PNG too big. In very high resolution, you will have to drop the --fullpage option, screenshot fragment by fragment and reassemble in your image editor.
Ref:
got the first trick from How can I scale an entire web page with CSS? : it seems Firefox still has issues with the zoom CSS rule so the -moz-* rules still have to be added, at least until version 38. If this gets corrected in future versions, just specify zoom: NN;.
In Firefox, I use these tricks :
Shift-F7 (or go to "Tools" menu -> Web Developer -> style editor) and insert these lines to zoom the whole page (here, by 4 or 400% so for example 72dpi becomes 288dpi and we get closer to a printable picture) :
body
zoom: 4; /* change zoom factor here... */
-moz-transform: scale(4); /* ...and here. */
-moz-transform-origin: 0 0;
- then Shift+F2 (or "Tools" > Web Developer > developer toolbar), and, in the little prompt at the bottom :
screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboardYou can also play with the Tools > Web Developer > Responsive Design View (or Ctrl+Shift+M) which allows you to specify custom resolutions and have a nifty button to take the screenshot, but zoom still has to be done manually.
Beware when choosing the zoom factor : Firefox gets grumpy if you try to generate a PNG too big. In very high resolution, you will have to drop the --fullpage option, screenshot fragment by fragment and reassemble in your image editor.
Ref:
got the first trick from How can I scale an entire web page with CSS? : it seems Firefox still has issues with the zoom CSS rule so the -moz-* rules still have to be added, at least until version 38. If this gets corrected in future versions, just specify zoom: NN;.
body
zoom: 4; /* change zoom factor here... */
-moz-transform: scale(4); /* ...and here. */
-moz-transform-origin: 0 0;
body
zoom: 4; /* change zoom factor here... */
-moz-transform: scale(4); /* ...and here. */
-moz-transform-origin: 0 0;
screenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboardscreenshot --fullpage
// or, directly into the clipboard instead of a png in the download folder
screenshot --fullpage --clipboardedited Mar 14 '16 at 22:28
answered Mar 13 '16 at 22:48
Chl
18116
18116
1
As of Firefox 62, it seems like the Shift+F2 developer tool has been removed.
– pixelistik
Sep 11 at 9:48
add a comment |
1
As of Firefox 62, it seems like the Shift+F2 developer tool has been removed.
– pixelistik
Sep 11 at 9:48
1
1
As of Firefox 62, it seems like the Shift+F2 developer tool has been removed.
– pixelistik
Sep 11 at 9:48
As of Firefox 62, it seems like the Shift+F2 developer tool has been removed.
– pixelistik
Sep 11 at 9:48
add a comment |
up vote
6
down vote
I've found a great answer at superuser using just the right parameter.
In the developer console (open with SHIFT+F2) use:
screenshot filename.png --dpr 4
This will increase screenshot resolution by factor 4.
add a comment |
up vote
6
down vote
I've found a great answer at superuser using just the right parameter.
In the developer console (open with SHIFT+F2) use:
screenshot filename.png --dpr 4
This will increase screenshot resolution by factor 4.
add a comment |
up vote
6
down vote
up vote
6
down vote
I've found a great answer at superuser using just the right parameter.
In the developer console (open with SHIFT+F2) use:
screenshot filename.png --dpr 4
This will increase screenshot resolution by factor 4.
I've found a great answer at superuser using just the right parameter.
In the developer console (open with SHIFT+F2) use:
screenshot filename.png --dpr 4
This will increase screenshot resolution by factor 4.
answered Jun 20 at 8:25
fineliner
10913
10913
add a comment |
add a comment |
up vote
2
down vote
Firefox 62 and following
In Firefox 62 and following, the GCLI was removed and the screenshot command was moved to the Web Console and prefixed with a colon.
To take a screen shot at 4 times the native screen resolution, open the web console (Tools -> Web Developer -> Web Console or CtrlShiftK, CmdOptionK on Mac) and type:
:screenshot --dpr 4
The file name is now optional and the console will tell you where the file was saved (typically in 'Downloads' with a system-specific naming scheme).
Additional parameters are available, see the Web Console documentation and Erik Meyer's blog post for more.
An additional note: large DPR values don't always work. There seems to be a limit around 120 megapixels. Larger screenshots will simply not complete and do nothing, silently. If the command does nothing for you, try lowering the dpr or resizing the window, until you get something out.
add a comment |
up vote
2
down vote
Firefox 62 and following
In Firefox 62 and following, the GCLI was removed and the screenshot command was moved to the Web Console and prefixed with a colon.
To take a screen shot at 4 times the native screen resolution, open the web console (Tools -> Web Developer -> Web Console or CtrlShiftK, CmdOptionK on Mac) and type:
:screenshot --dpr 4
The file name is now optional and the console will tell you where the file was saved (typically in 'Downloads' with a system-specific naming scheme).
Additional parameters are available, see the Web Console documentation and Erik Meyer's blog post for more.
An additional note: large DPR values don't always work. There seems to be a limit around 120 megapixels. Larger screenshots will simply not complete and do nothing, silently. If the command does nothing for you, try lowering the dpr or resizing the window, until you get something out.
add a comment |
up vote
2
down vote
up vote
2
down vote
Firefox 62 and following
In Firefox 62 and following, the GCLI was removed and the screenshot command was moved to the Web Console and prefixed with a colon.
To take a screen shot at 4 times the native screen resolution, open the web console (Tools -> Web Developer -> Web Console or CtrlShiftK, CmdOptionK on Mac) and type:
:screenshot --dpr 4
The file name is now optional and the console will tell you where the file was saved (typically in 'Downloads' with a system-specific naming scheme).
Additional parameters are available, see the Web Console documentation and Erik Meyer's blog post for more.
An additional note: large DPR values don't always work. There seems to be a limit around 120 megapixels. Larger screenshots will simply not complete and do nothing, silently. If the command does nothing for you, try lowering the dpr or resizing the window, until you get something out.
Firefox 62 and following
In Firefox 62 and following, the GCLI was removed and the screenshot command was moved to the Web Console and prefixed with a colon.
To take a screen shot at 4 times the native screen resolution, open the web console (Tools -> Web Developer -> Web Console or CtrlShiftK, CmdOptionK on Mac) and type:
:screenshot --dpr 4
The file name is now optional and the console will tell you where the file was saved (typically in 'Downloads' with a system-specific naming scheme).
Additional parameters are available, see the Web Console documentation and Erik Meyer's blog post for more.
An additional note: large DPR values don't always work. There seems to be a limit around 120 megapixels. Larger screenshots will simply not complete and do nothing, silently. If the command does nothing for you, try lowering the dpr or resizing the window, until you get something out.
edited Nov 11 at 14:06
answered Oct 17 at 14:32
Calimo
4,20722248
4,20722248
add a comment |
add a comment |
up vote
1
down vote
Combining the above answers and comments, you can get a decent resolution screenshot of an entire webpage by hitting shift + F2 in Firefox. Then, when the console pops up at the bottom of the screen, input:
screenshot --fullpage --dpr 4 filename.png
On Windows 10, it saves that filename.png to your C:UsersyourusernameDownloads folder by default. To specify you need to double down on backslashes:
screenshot --fullpage --dpr 4 C:\Users\yourusername\path\to\filename.png
add a comment |
up vote
1
down vote
Combining the above answers and comments, you can get a decent resolution screenshot of an entire webpage by hitting shift + F2 in Firefox. Then, when the console pops up at the bottom of the screen, input:
screenshot --fullpage --dpr 4 filename.png
On Windows 10, it saves that filename.png to your C:UsersyourusernameDownloads folder by default. To specify you need to double down on backslashes:
screenshot --fullpage --dpr 4 C:\Users\yourusername\path\to\filename.png
add a comment |
up vote
1
down vote
up vote
1
down vote
Combining the above answers and comments, you can get a decent resolution screenshot of an entire webpage by hitting shift + F2 in Firefox. Then, when the console pops up at the bottom of the screen, input:
screenshot --fullpage --dpr 4 filename.png
On Windows 10, it saves that filename.png to your C:UsersyourusernameDownloads folder by default. To specify you need to double down on backslashes:
screenshot --fullpage --dpr 4 C:\Users\yourusername\path\to\filename.png
Combining the above answers and comments, you can get a decent resolution screenshot of an entire webpage by hitting shift + F2 in Firefox. Then, when the console pops up at the bottom of the screen, input:
screenshot --fullpage --dpr 4 filename.png
On Windows 10, it saves that filename.png to your C:UsersyourusernameDownloads folder by default. To specify you need to double down on backslashes:
screenshot --fullpage --dpr 4 C:\Users\yourusername\path\to\filename.png
answered Aug 25 at 6:33
r3robertson
492415
492415
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f32743509%2fcan-i-create-high-resolution-screenshots-in-firefox%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
By higher resolution, do you actually mean higher viewport size? If so, use Responsive Design View, and increase the shown dimensions …
– CBroe
Sep 23 '15 at 15:25
@CBroe No. Imagine I would zoom into the image with Firefox and then take a screenshot. Let's say a zoom 200% when the width of the window is 1000px, then I would like to have an image with 2000px. But it should be a fullpage screenshot.
– robsch
Sep 23 '15 at 15:31
Sounds like something that probably should have been filed over on bugzilla.mozilla.org
– Mike 'Pomax' Kamermans
Oct 15 at 17:10
@Mike'Pomax'Kamermans Turns out it was, and got fixed: bugzilla.mozilla.org/show_bug.cgi?id=1464461
– Calimo
Oct 17 at 14:21