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

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: 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?

• How to take a screenshot of a something bigger than the screen?
  superuser.com
• Get Google Maps to print entire map displayed
  webapps.stackexchange.com
• «Capturing an Image That Is Larger than Computer Screen» and «How do I capture the contents of a window that is bigger than the screen?» on locked or outdated conversations
• less reliable questions from less reputable websites.

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

To add a clarification on what is unique here, some web pages contain a mechanism for rendering a window on a huge virtual image. The size of the window is defined by available screen real estate, and then that is how much of the image is displayed. The underlying virtual image can be scrolled or dragged to reveal more. The virtual image may not even exist as a single large image, but the area of interest can be assembled as needed. Most screen capture methods will capture what is displayed, but do not give you access to the underlying virtual image. (cont'd)

What is described here is more than just capturing the existing page, including offscreen portions viewable by scrolling. It's defining a virtual canvas. The page rendering mechanism uses that canvas as if the screen had nearly endless available real estate to display a much bigger portion of the underlying virtual image.

3 Answers 3

100% Web Browser Solution

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

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»
3. Select «Responsive Design Mode» (RDM)
   
   • 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
5. Using the camera icon in RDM toolbar or a Firefox Add-on, capture the image( † )
   

† 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.

Map My Ride at 6%" />

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

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

► View this solution on YouTube.