Firefox – Create an image or print a webpage larger than the screen from a web browser

browserfirefoxgoogle-searchsave asscreenshot

Q:

How can I create an image or print a webpage larger than the screen from a web browser? Since I can't enlarge my window beyond my screen, I am limited by the screen I use:

enter image description here

I would like to make a very large print, with lots of details, as if I had a very large screen.

Why this new question?

Most questions on the topic:

merely address the specific case of Google Maps, or require specific third party software, or have silly answers such as «expand your window», not withstanding that it is simply not an option in most scenarios. And what about the moon?

Furthermore, there is no general question nor answer which addresses:

  1. Create an image or export only the part you need
  2. Screen resolution independent solution which does not go through a screen shot
  3. No software purchase which may or may not work on your platform
  4. Create an image or print a webpage larger than the screen from a web browser
  5. Any website, any size

Best Answer

  • 100% Web Browser Solution

    Here is a solution involving only Firefox, a trusted and secure browser.

    Yahoo Map at 12%

    Image source: https://search.yahoo.com (i.e. not Google Map) at 5369×5913 pixels and 24.6 MB

    Using Firefox

    1. In Firefox:
      • open your web page
      • don't use full-screen mode
      • ensure you can see your scroll bars, you are going to need them
      • go to Tools > Web Developer > Inspector
    2. Make sure that the developer tools «Show in separate window» Show in separate window
    3. Select «Responsive Design Mode» (RDM)
      Responsive Design Mode
      • put that Inspector window to the side, you won't need it any more
    4. Back in your web page, using the RDM toolbar, pick a virtual window size that suits your need ; the larger the window, the more memory and resources Responsive Design Mode
    5. Using the camera icon in RDM toolbar or a Firefox Add-on, capture the image()
      Camera

    Some captures (not technically screen shots) are just too large to handle. I have used Save Page As Image... Abduction Add-on and its selection-copy X-Ray + Copy... to paste the images below in my favorite image editing software for post-processing, without compromising on quality, some of them well over 100 MB as PNG.
    X-Ray + Copy


    Map My Ride at 6%

    Image source: http://mapmyride.com (i.e. not Google Map) at 5659×7966 pixels and 113.2 MB

    Moon at 12%

    Image source: https://www.google.com/moon/ (yay Google) at 3600×3540 pixels and 9.3 MB


    ► View this solution on YouTube.