Author Topic: making a single .jpg from a web-page that is over one screen long (Read 22,345 times)

Steven Avery · « **on:** June 12, 2018, 02:16 PM »

Is this easy to do with one or more of the tools?

My normal screen capture is Win-Snap and Abbyy ScreenShot Reader.

I've used some others. I simply want to make a jpg that shows the whole magilla.
The source web pages will usually be under two screen pages long.

Also if there is a way using a Windows and "-" key, or reducing in some way, that is an alternate.

Your suggestions?

tomos · « **Reply #1 on:** June 12, 2018, 02:36 PM »

Have you looked for extensions/addons for your browser that will do this -- they often the best solution.

Screenshot Captor does scrolling capture, is very good, (but this job appears to be problematic at times for all apps).
Was going to recommend mouser's series of videos related to SC but have no idea where they are -- mouser ! there's no links to those videos on SC's homepage?

rgdot · « **Reply #2 on:** June 12, 2018, 03:00 PM »

FWIW Firefox's own screenshot tool does that well in my experience

Steven Avery · « **Reply #3 on:** June 12, 2018, 04:36 PM »

Thanks!

So far I've tried Nimbus and Awesome Screenshot on Chrome.

Some results here:
http://www.purebibleforum.com/showthread.php?544-Song-of-Songs-speakers-identified-in-the-text&p=1318#post1318

Awesome allows lots of tweaking.
Both seemed to want to make .PNG which do not get large easily like my .JPGs

I can simply cut and paste from the website into the forum, but then the double column loses the matching integrity.
I am leaving the examples on the page for now.

And I own SnagIt 7 - that might be a good try.

Ath · « **Reply #4 on:** June 12, 2018, 06:18 PM »

With you being a DC veteran, I'm a bit ~~disappointed~~surprised you haven't tried Screenshot Captor yet... (as already suggested above)

tomos · « **Reply #5 on:** June 12, 2018, 06:35 PM »

Quote from: Steven Avery on June 12, 2018, 04:36 PM

Both seemed to want to make .PNG which do not get large easily like my .JPGs

I think this sentence might be incomplete or incorrect? Doesn't make sense to me anyways.

You say above you want jpgs (in SC you can make jpg default). Why jpgs btw?

ConstanceJill · « **Reply #6 on:** June 12, 2018, 08:35 PM »

I've used Pearl Crescent Page Saver Basic for a while, it allows both PNG and JPEG.

Also, I second the question: why jpg ? PNG offers lossless quality and may even produce lighter files (depending on the contents on the page).

x16wda · « **Reply #7 on:** June 13, 2018, 01:36 AM »

I've used wkhtmltopdf and wkhtmltoimage before with great success.

Quote

What is it?
wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line tools to render HTML into PDF and various image formats using the Qt WebKit rendering engine. These run entirely "headless" and do not require a display or display service.

There is also a C library, if you're into that kind of thing.

How do I use it?
Download a precompiled binary or build from source
Create your HTML document that you want to turn into a PDF (or image)
Run your HTML document through the tool.
For example, if I really like the treatment Google has done to their logo today and want to capture it forever as a PDF:

wkhtmltopdf http://google.com google.pdf

wraith808 · « **Reply #8 on:** June 13, 2018, 02:35 AM »

Quote from: ConstanceJill on June 12, 2018, 08:35 PM

I've used Pearl Crescent Page Saver Basic for a while, it allows both PNG and JPEG.

Also, I second the question: why jpg ? PNG offers lossless quality and may even produce lighter files (depending on the contents on the page).

png is larger in many cases. And if you reduce the quality, why go lossless.

IainB · « **Reply #9 on:** June 13, 2018, 10:22 AM »

Not sure whether these will have been already tried/suggested:
Screengrab:
http://www.s3blog.org/screengrab.html
(Add-on for Firefox and Chrome.)

ScreenshotGuru:

Quote

Screenshot Guru - <https://screenshot.guru/>
Screenshot Guru, available at screenshot.guru, lets you screen-capture beautiful and high-resolution screenshot images of any web page on the Internet. You can screenshot tweets, news articles, photo galleries and everything that's public online.

You don't need any screen-capture software or browser extensions to capture screenshots. And the tool works with lengthy web pages too that extend below the fold. To get started, simply enter the full URL of any web page in the input box, solve the CAPTCHA and hit the "Screen Capture" button.

Screenshot Guru cannot capture web pages that require login (like your Gmail mailbox), pages with Flash embeds (like the YouTube video player) or AJAX based sites like Google Maps.

You can also add device frames for more awesome mobile screenshots. iPad and iPhone have built-in screen capture, including some Android phones, but they cannot capture full screenshots of web pages. Screenshot Guru has no such limitation.

Steven Avery · « **Reply #10 on:** June 13, 2018, 10:46 AM »

Thanks!

I had noticed with regular pics, that if I took two pictures of the same screen region
with WinSnap .. that the .PNG pic would not go into vBulletin as large as the . JPG
So I made sure the setting is .JPG. Dunno why it works that way.

==============

Awesome Screenshot (ran better in Chrome) did fine in making the image, .PNG, but again, it would not
go into vBulletin as large as I would like. Maybe there is a fix for that.

Screenshot Captor seems to want me to do some stitching, and was showing me part of my
screen above and below the actual browser window (I think) I would be happy to try again
later but for now it is not simple enough.

Pearl Crescent Page Save is Firefox 57 (Quantum) and I use lower Firefoxes like 52.
In a pinch I could run both versions.

My SnagIt 7 license is pretty low for Windows 10, not really compatible.

Screengrab and ScreenshotGuru - maybe

Conceptually, it may well be that extensions do better, because they are thinking website window.

Of course, there are likely a couple dozen others.

Steven

panzer · « **Reply #11 on:** June 13, 2018, 12:48 PM »

Use FastStone Capture last free version and click on Capture scrolling window.

ConstanceJill · « **Reply #12 on:** June 13, 2018, 09:39 PM »

Quote from: wraith808 on June 13, 2018, 02:35 AM

png is larger in many cases.

It heavily depends on the type of picture you have. JPEG is mostly better for photos while PNG is better for pictures with much higher contrast, such as most webpages that do not include photos as their main contents.

I just tested with this thread's page as it was displayed on my computer before I posted, and got a 449 KB .PNG file on one side, and a 1.2 MB .jpg file on the other side.
Trying to save to JPEG that same picture (starting from the lighter, lossless version) with enough compression so that it goes below 450 KB (using IrfanView, either with the RIOT plug-in and specifying a size, or without the RIOT plug-in but by trying various possible values for the quality slider) produced pictures with lots of artefacts around the text, which is really ugly.

Also, the PNG file I obtained can be quickly optimized to become even smaller, still without quality loss, with programs such as PngOptimizer : I got it down to 372 KB.

Quote from: Steven Avery on June 13, 2018, 10:46 AM

Pearl Crescent Page Save is Firefox 57 (Quantum) and I use lower Firefoxes like 52.

Only the version called Page Saver WE (for WebExtensions) requires 57+, while this one is for earlier versions.

wraith808 · « **Reply #13 on:** June 14, 2018, 01:11 AM »

Quote from: ConstanceJill on June 13, 2018, 09:39 PM

It heavily depends on the type of picture you have.

That was my only point. It does depend. But in your original post you said "why JPG" as if it had no place

* wraith808 shrugs

ConstanceJill · « **Reply #14 on:** June 14, 2018, 07:29 AM »

I just "instinctively" thought PNG was very likely to be better for webpages because from my own (admittedly subjective) experience, I found that most web pages produce both lighter and better quality pictures being saved as PNG, unless the contents of the page includes a significant portion made of pictures (especially if those are already in JPEG), and thus it seemed only natural to question the choice of JPG.

For now we only know that OP encounters some kind of issue when posting PNG pictures to forums working with vBulletin, which seems to be the only reason —although I guess it may be a fair enough one, if the issue is too bothersome and can't be fixed— why he favors JPG.

Steven Avery · « **Reply #15 on:** June 14, 2018, 07:51 AM »

Quote from: ConstanceJill on June 14, 2018, 07:29 AM

For now we only know that OP encounters some kind of issue when posting PNG pictures to forums working with vBulletin, which seems to be the only reason —although I guess it may be a fair enough one, if the issue is too bothersome and can't be fixed— why he favors JPG.

Yes, the issue was simply that the .JPG would fill up the page in vBulletin on the large sizes. The .PNG would make a smaller image to the left. For my purposes, I generally like the biggies.

tomos · « **Reply #16 on:** June 14, 2018, 12:43 PM »

Quote from: Steven Avery on June 14, 2018, 07:51 AM

Yes, the issue was simply that the .JPG would fill up the page in vBulletin on the large sizes. The .PNG would make a smaller image to the left. For my purposes, I generally like the biggies.

Would be interesting to hear if that also the case with screenshots taken by other softwares

wraith808 · « **Reply #17 on:** June 14, 2018, 02:04 PM »

Quote from: ConstanceJill on June 14, 2018, 07:29 AM

I just "instinctively" thought PNG was very likely to be better for webpages because from my own (admittedly subjective) experience, I found that most web pages produce both lighter and better quality pictures being saved as PNG, unless the contents of the page includes a significant portion made of pictures (especially if those are already in JPEG), and thus it seemed only natural to question the choice of JPG.

For now we only know that OP encounters some kind of issue when posting PNG pictures to forums working with vBulletin, which seems to be the only reason —although I guess it may be a fair enough one, if the issue is too bothersome and can't be fixed— why he favors JPG.

Sometimes I've found that JPG is better still. The PNGs on some (even not photographs) is very much larger. I still like PNGs better, but after anecdotal evidence (especially with photographs as you state), I always check the size and go with whichever works best for the situation.

allen · « **Reply #18 on:** June 14, 2018, 03:07 PM »

JPG format really doesn't do websites/text well. If you want clarity, PNG is just going to work a lot better. Personally, I'd use the Awesome Screenshot extension for the capture and then run the image through https://tinypng.com/ to optimize file size.

Ath · « **Reply #19 on:** June 15, 2018, 06:09 AM »

What I read from the OP is that not the smallest file is the issue, but the fact that vBulletin displays the jpg's larger then png's. And in the end that's just a setting/style fix on the vBulletin side...

From that startingpoint, the discussion on jpg vs. png, it comes down to the actual use, seeing that jpg is crap on fine details, but quite alright on photos, where png is very good in fine details, but also good in photos, with the side note that those png-photo files seem to be a tad larger than their jpg counterparts.

tomos · « **Reply #20 on:** June 15, 2018, 09:31 AM »

Quote from: Ath on June 15, 2018, 06:09 AM

What I read from the OP is that not the smallest file is the issue, but the fact that vBulletin displays the jpg's larger then png's.

it sounds like it has a fit-to-window setting for jpegs; the png OTOH is being shown actual size.

rjbull · « **Reply #21 on:** June 17, 2018, 08:50 PM »

PicPic (free-for-personal-use) will also do scrolling capture. A few years ago, I tried it and mouser's SSC side by side on a complicated web page. SSC was more 'fuss' in that it wanted to do a dummy run first, but when I let it do that, there was no question that it gave a rather better result. However, it still wasn't perfect because the web page was just too complex.

Is the OP irremediably determined to use JPGs? I wondered if other options had been considered, e.g.:

Save web page to disk complete - can end up with a multitude of files/directories, though
Save as a .MHT / MHTML^w file, so the whole web page is in a single file
Print to a PDF
in extremis, print to a text file

Curt · « **Reply #22 on:** July 04, 2018, 04:05 PM »

http://www.faststone.org/FSCaptureDetail.htm

FastStone Screen Capture is now at version 9. She's still both cheap and easy, but highly capable.
$20 for a lifetime key. Mine has so far lasted 6 years. A Best Buy.

Steven Avery · « **Reply #23 on:** July 13, 2018, 02:30 PM »

Great suggestions. Will be revisiting and testing.

The goal is to make a scrollable website, usually under 2 page sizes total into one clear and simple pic. This will often be quicker, and look better, than doing multiple pics. And in some cases even a longer web, like 3 or 4 pages, may do well.

Lintalist · « **Reply #24 on:** July 13, 2018, 06:28 PM »

You can automate it if you wish and/or need to using PhantomJS - a headless browser (its portable, just unpack it) - example code
http://phantomjs.org/screen-capture.html
(note you can adjust the view port so you could grab a page at various resolutions e.g. mobile vs desktop)