Saving large webpage as Image

Question

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?

Do you just want the pictures on that page? right click on each image and select "save image as" — Moab, Nov 01 '12 at 05:03
@Moab Actually I want whole page as an image (pictures, text & everything on screen)... — Nalaka526, Nov 01 '12 at 05: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 01 '12 at 08:40
Snagit would do it seamlessly, better than any other possibility here — gd1, Nov 01 '12 at 13:00
You should use a camera to take pictures of the page, and then splice them together! — Peter Olson, Nov 01 '12 at 17:10
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 — Wasiq Shahrukh, Jul 30 '16 at 12:31
You can use the *capture node screenshot* command as [described here](https://css-tricks.com/full-page-screenshots-browsers/#chrome). — Ben, May 23 '21 at 04:44

score 20 · Answer 1 · edited Mar 20 '17 at 10:17

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.

edited Mar 20 '17 at 10:17

Community

1

answered Nov 01 '12 at 05:20

iivel

1,360
10
6

9

Printing as PDF will split the webpage in to pages I guess... :( – Nalaka526 Nov 01 '12 at 05: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 01 '12 at 05:30
@Nalaka526 not unless you set your paper size to A3 or A2. – invert Nov 01 '12 at 07:28
2

See this comment for a better answer when using Chrome for desktop: https://superuser.com/a/1733521/181113 – supaflav Dec 08 '22 at 15:47

Otrozone · Answer 2 · 2023-08-30T13:34:16.193

17

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

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

Write down screenshot and use Capture full size screenshot.

(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;}"}));

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

edited Aug 30 '23 at 13:34

answered Jul 25 '22 at 12:21

Otrozone

311
2
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 '22 at 09:46
This should be the accepted answer. Thank you. – donturner Nov 01 '22 at 10:21
Anyone else missing "Screenshot" in the list of commands? – Keyslinger Nov 01 '22 at 16:43
This doesn't work if you're dealing with a long webpage that requires some scrolling. – Christopher Markieta Jun 21 '23 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 '23 at 10:43

score 12 · Answer 3 · edited Jun 12 '20 at 13:48

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:

SiteShoter is a portable app:
There are any number of online web screenshot apps, such as this one

edited Jun 12 '20 at 13:48

Community

1

answered Nov 01 '12 at 06:11

Karan

55,947
20
119
191

1

Found this standalone application (http://www.webscreencapture.com/) and it saved the webpage successfully, Thanks a lot for your suggestions... :) – Nalaka526 Nov 01 '12 at 06:43

CichyK24 · Answer 4 · 2013-03-05T18:36:17.353

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

edited Mar 05 '13 at 18:36

answered Nov 03 '12 at 17:08

CichyK24

449
3
7

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

score 7 · Accepted Answer · answered Nov 01 '12 at 06:40

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.

answered Nov 01 '12 at 06:40

Nalaka526

1,534
8
21
36

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 05 '15 at 02:48

score 5 · Answer 6 · edited Nov 04 '12 at 17:11

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

edited Nov 04 '12 at 17:11

Indrek

24,204
14
90
93

answered Nov 01 '12 at 12:41

Bagata

151
3

c-sharp · Answer 7 · 2012-11-01T10:51:42.517

2

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

edited Nov 01 '12 at 10:51

answered Nov 01 '12 at 10:42

c-sharp

121
4

This is Commercial tool, But as per the question this answer is correct. I found a [free tool](http://www.webscreencapture.com/) which can accomplish the same (my requirement) so it suits better... Thanks for the answer and up-voting... :) – Nalaka526 Nov 01 '12 at 11:22
1

Thank you. But you could use its free trial version. – c-sharp Nov 02 '12 at 07:37

score 2 · Answer 8 · answered Nov 01 '12 at 13:21

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/

answered Nov 01 '12 at 13:21

Tal

121
2

That's a really slick library; thanks for posting it. – iivel Nov 01 '12 at 15:30

score 1 · Answer 9 · answered Nov 01 '12 at 10:15

1

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

answered Nov 01 '12 at 10:15

chele

11
1

1

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

score 1 · Answer 10 · edited Nov 04 '12 at 17:14

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/

edited Nov 04 '12 at 17:14

Nalaka526

1,534
8
21
36

answered Nov 01 '12 at 12:14

Manoranjan Jena

11
1

Moab · Answer 11 · 2012-11-01T05:43:14.813

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

edited Nov 01 '12 at 05:43

answered Nov 01 '12 at 05:37

Moab

58,044
21
113
176

3

How does it answer OP's question? – default locale Nov 01 '12 at 07:57
2

This is unrelated to the question and tries to assume further knowledge of what iivel is looking for. – Steffan Donal Nov 01 '12 at 10:08
1

@Ruirize -- what was I looking for? – iivel Nov 01 '12 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 01 '12 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 01 '12 at 16:07
@Moab My actual intention was to save the images with their description along with the pictures, so I thought saving the whole thing as a single image file would be nice rather than saving it as a MHT file and having all the related files in a separate folder along with the MHT file. Your solution did not help me at all as I already knew the steps you have mentioned in your answer. But still you have my up-vote on your answer because I thought it will help someone (as Ruirize mentioned its adding further knowledge). For the original requirement your solution does not work. Sorry :( – Nalaka526 Nov 01 '12 at 16:27
@Nalaka526 thanks for that, but it would have been better to include some of this information in the original question, concise, accurate questions get the same in return for answers. No big deal, have a great day. So how do you view that long image file? what software do you use that makes it easy to view it and scroll down? – Moab Nov 01 '12 at 20:37
@Moab Thank you for your suggestion... Normally I use Picasa to view images, but I too find it bit difficult to scroll & view saved long image. My workaround for that is to open the image with Explorer or Chrome (what I do is Drag and Drop) will open the image and can be scrolled as a normal webpage. Have a great day :) – Nalaka526 Nov 02 '12 at 02:47

score 0 · Answer 12 · answered Nov 01 '12 at 16:31

0

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

answered Nov 01 '12 at 16:31

Mark Redman

263
1
3
8

It's doubtful any browser could zoom-out enough to show all 57 images. – martineau Nov 01 '12 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... – Mark Redman Nov 02 '12 at 08:55

score 0 · Answer 13 · edited Nov 02 '12 at 07:25

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

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
Switch to the webpage, press PrtSc on your keyboard.
Switch back to the image editing program , paste your image in the canvas.
Switch to the webpage, scroll the window down until you've reached the end of the last printed image, and press Print Screen again.
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.
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: sometimes you just have to do a little work.. its not rocket science. — Mark Redman, Nov 02 '12 at 08:56

Saving large webpage as Image

13 Answers13