36

I'm trying to save a webpage as an image. The web page I'm trying to save is a bit long, and has many images.

I tried Google Chrome Screen Capture Extension and few other Chrome screen-capture plugins, but all gave me an empty image as output.

How can I overcome this? Are there any other known plugins (non-Chrome is OK) to save a large web page as an image?

7
  • Do you just want the pictures on that page? right click on each image and select "save image as"
    – Moab
    Nov 1, 2012 at 5:03
  • @Moab Actually I want whole page as an image (pictures, text & everything on screen)...
    – Nalaka526
    Nov 1, 2012 at 5:08
  • If you just want to save the page for later, you could also save it as a web archive (single .mht file). I know IE and Opera can do that at least.
    – Svish
    Nov 1, 2012 at 8:40
  • 1
    You should use a camera to take pictures of the page, and then splice them together! Nov 1, 2012 at 17:10
  • 1
    just install M.S edge and you can copy the whole page using inbuilt crop function that copies your selection which you can paste it in paint and save it as jpg or png file Jul 30, 2016 at 12:31

13 Answers 13

23
  1. In Chrome browser show Developer tools: Menu -> More tools -> Developer tools (F12 or Ctrl + Shift + I).

Show Devloper tools

  1. Then Menu -> Run command (Ctrl + Shift + P).

Run command

  1. Write down screenshot and use Capture full size screenshot.

Capture full size schreenshot

  1. (Optional) If the image does not contain full page, you can try to execute following command in console, to add some styling (as suggested in this thread).
document.querySelector("head").appendChild(Object.assign(document.createElement("style"), {textContent: "html, body, div, section {overflow: visible !important;}"}));

Add overflow:visible style to page header.

  1. (Optional) If some element overlaps the content you need, simply use Selection tool to select the element and then hide or delete it using context menu.

Select and delete the overlapping element

6
  • sadly this isnt higher in the results. no plugins/addins needed and saves large sites (printed in more than 5 A4 pages) in a second. excellent. thanks!
    – Michael
    Jul 30, 2022 at 9:46
  • This should be the accepted answer. Thank you.
    – donturner
    Nov 1, 2022 at 10:21
  • Anyone else missing "Screenshot" in the list of commands?
    – Keyslinger
    Nov 1, 2022 at 16:43
  • This doesn't work if you're dealing with a long webpage that requires some scrolling. Jun 21, 2023 at 16:30
  • @Christopher Markieta: That's partially true. It depends, how the website is created. For example this StackExchange page is already pretty long and it needs scrolling. Despite this, you can save it without any problems. I agree, that for some web pages it does not work perfeclty. It saves only the part of the displayed browser window. Maybe it's caused by the overflow: hidden property. I didn't found any solution for these sites yet.
    – Otrozone
    Jun 23, 2023 at 10:43
20

Print to PDF, then save the PDF as an image. I think that's probably your most foolproof method.

Printing to PDF is straightforward and you've got a ton of options, conversion after the fact will maintain page layout.

Conversion answer here: How do I save an image PDF file as an image?

As a note: if you use the PDFCreator project available from http://www.pdfforge.org/ the option to print a PDF as an image, or to print as an image is native.

4
  • 11
    Printing as PDF will split the webpage in to pages I guess... :(
    – Nalaka526
    Nov 1, 2012 at 5:24
  • Depends on your page layout/paper size and print options for your PDF printer. You can always select the scale to 1 sheet as well.
    – iivel
    Nov 1, 2012 at 5:30
  • @Nalaka526 not unless you set your paper size to A3 or A2.
    – invert
    Nov 1, 2012 at 7:28
  • 2
    See this comment for a better answer when using Chrome for desktop: superuser.com/a/1733521/181113
    – supaflav
    Dec 8, 2022 at 15:47
12

The Firefox Abduction! add-on couldn't save an image that large. If you absolutely want to save an ultra-lengthy single image and are open to non-Chrome solutions, here are a few that might work:

  1. SiteShoter is a portable app:

    1

  2. There are any number of online web screenshot apps, such as this one

1
  • 1
    Found this standalone application (webscreencapture.com) and it saved the webpage successfully, Thanks a lot for your suggestions... :)
    – Nalaka526
    Nov 1, 2012 at 6:43
11

There is a new Firefox Command Line that allows you to take screenshots.

Press Shift+F2 and write screenshot filename1.png 0 true

Unfortunately for your site I get error..., but nevertheless it's a nice to know feature .

UPDATE: It seems that syntax has slightly changed in newer version and now to take full screenshot you need to type screenshot filename.png --fullpage

3
  • For others, this is built-in to the main Firefox browser, no extensions/add-ons required
    – rcoup
    Jun 12, 2017 at 15:31
  • To whom it may concern, GCLI has been remove from stable firefox release. support.mozilla.org/en-US/questions/1222635
    – SedriX
    Feb 11, 2022 at 9:17
  • This has changed. Now, simply use Ctrl + Shift + S.
    – Otrozone
    Sep 15, 2022 at 7:59
7

Found this standalone (Portable App) : Web Screen Capture, which could successfully save the webpage as an image...

Thanks everyone answered... :), suggestions are really valuable and made me think in many ways to get this done. "Karan"s answer made me think of Standalone applications which I was not aware of... Thanks a lot.

1
  • 3
    The link is now dead. You should still be able to download it from archive.org, however. Unfortunately, there is no guarantee that the software will work with recent version of Windows such as Windows 8 or 10.
    – JPaget
    Aug 5, 2015 at 2:48
5

You can use Awesome Screenshot:

  • Capture or clip selected area, or all visible portion, or entire page
  • Support PNG format
  • Support horizontal scroll when capturing
2

If I have correctly understand your question then it will surely your answer. You have the Snagit tool to capture whole screen.

2
  • This is Commercial tool, But as per the question this answer is correct. I found a free tool which can accomplish the same (my requirement) so it suits better... Thanks for the answer and up-voting... :)
    – Nalaka526
    Nov 1, 2012 at 11:22
  • 1
    Thank you. But you could use its free trial version.
    – c-sharp
    Nov 2, 2012 at 7:37
2

Another way to do this (in an automated fashion), would be to use Phantom JS, the headless WebKit web browser. An included example "technews.js" will "capture Google News as a PNG image" and that example could be modified for any website.

http://phantomjs.org/

1
  • That's a really slick library; thanks for posting it.
    – iivel
    Nov 1, 2012 at 15:30
1

If you use Chrome, then you can try Explain and Send Screenshots

2
  • 1
    This Extension also failed to save the perticular website
    – Nalaka526
    Nov 1, 2012 at 10:54
  • Sory to hear that, but it has worked to me.
    – chele
    Nov 1, 2012 at 11:03
1

Use FireShot add-ons to save a large webpage to Image and PDF also.

It is supported on Firefox, Chrome and IE also.

To install in Firefox go to Tools -> Add-ons then search FireShot and install it.

More about Fireshot visit http://getfireshot.com/

0

I have tried a few things. Open the webpage in Chrome, then right click on an empty spot on the page and select "Save as", then select "save as type" "webpage,complete" at the bottom of the save as window.

Save it to an empty folder, it will save one file and a folder (they must be kept together in the same folder), any time you want to view the page, double click the htm file.

Inside the folder you will find all the images should you want them for other purposes.

.

enter image description here

8
  • 3
    How does it answer OP's question? Nov 1, 2012 at 7:57
  • 2
    This is unrelated to the question and tries to assume further knowledge of what iivel is looking for. Nov 1, 2012 at 10:08
  • 1
    @Ruirize -- what was I looking for?
    – iivel
    Nov 1, 2012 at 15:29
  • @Ruirize, No good way to save a page that large to a single image, imagine trying to view a jpeg that large(long). I tried the portable app and it saved the webpage as a jpeg, worthless for viewing, The OP did not know what they were looking for.
    – Moab
    Nov 1, 2012 at 15:53
  • @Ruirize OP never stated what they were going to use "the image" for either, the question is ambiguous in its present form. Mine is a good solution, just does not make you happy.
    – Moab
    Nov 1, 2012 at 16:07
0

If you dont need the image the actual size, you could zoom out, then take a screenshot?

2
  • It's doubtful any browser could zoom-out enough to show all 57 images.
    – martineau
    Nov 1, 2012 at 16:52
  • You could try a combination of zooming out and taking multiple screen shots down the page... then combine the images... yes some work required, but wont take that long... Nov 2, 2012 at 8:55
0

If i understand your question, what you want is capturing the whole website, am I right? Do the following:

  1. Open your favourite image editing program (I recommend Paint.NET), create a new canvas with a pretty big height, as high as the hole page would ever take
  2. Switch to the webpage, press PrtSc on your keyboard.
  3. Switch back to the image editing program , paste your image in the canvas.
  4. Switch to the webpage, scroll the window down until you've reached the end of the last printed image, and press Print Screen again.
  5. Switch back to your image editing program , now paste the New right underneath the previously pasted one, so that it starts from where the previous image Ended.
  6. Repeat the previous steps dozen of times until you have scrolled down to the bottom of the window.

it's a long solution , but it works.

1
  • +1: sometimes you just have to do a little work.. its not rocket science. Nov 2, 2012 at 8:56

You must log in to answer this question.

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