How to take screen shot of part of webpage in png format

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
Let me explain in a bit more detail to elaborate on the subject line.

I often need to create a pdf file of a part of a web page that extends past what I can see on the monitor at one time, ie I have to scroll down to see the whole web page.

I used a feature in Firefox called screenshot - it would allow me to either save the whole web page regardless how large it was, or I could select, say the centre portion of the web page and scroll down to select exactly what I wanted and then download that.
In Firefox, a couple of versions ago, that gave me a png file which I then converted to pdf.
All worked perfectly the way I needed it.

I have never come across another browser that has that screen shot option for a complete web page.

Turns out that a couple of releases ago, someone at Mozilla decided to change that screen shot feature and it now saves as a jpg file rather than a png file.
Apparently no option to change back to png.

The problem with the jpg file is that the text and images are not nearly as clear and crisp as they were with png and conversion to a pdf file doesn't make things any better.
I see some discussion on Firefox/Mozilla discussion sites where people complain - want the png option back, but so far that request has been ignored.
I really hate it when developers change a feature without providing the option of retaining the previous operation - and even worse, not letting the user know the feature functionality has changed. Seems to happen more and more lately.

Anyway - does anyone know of an application or browser that allows one to take a selective screen shot that can be used for the whole web page including the portion that is not visible on the screen.
 
Last edited:
Joined
May 21, 2012
Messages
10,702
Reaction score
1,158
Points
113
Location
Rhode Island
Your Mac's Specs
M1 Mac Studio, 11" iPad Pro 3rdGen, iPhone 13 ProMax, Watch S7, 2018 15" MBP, AirPods Pro
Which OS version? Have you tried "Shift+Command+5"? Then look at the options available?
 

pigoo3

Well-known member
Staff member
Admin
Joined
May 20, 2008
Messages
44,210
Reaction score
1,418
Points
113
Location
U.S.
Your Mac's Specs
2017 15" MBP, 16gig ram, 1TB SSD, OS 10.15
Anyway - does anyone know of an application or browser that allows one to take a selective screen shot that can be used for the whole web page including the portion that is not visible on the screen.

There are some browser plugins or apps that can do this...most of them cost some $$$. I did come across a plugin for Chrome that's supposed to do this (but haven't tested it myself)...and as far as I can tell it's free:

Full Page Screen Capture - Chrome Web Store

As far as screenshots being saved as png. I use Safari most of the time...and it automatically saves screenshots as png.:)

- Nick
 

IWT


Joined
Jan 23, 2009
Messages
10,218
Reaction score
2,175
Points
113
Location
Born Scotland. Worked all over UK. Live in Wales
Your Mac's Specs
M2 Max Studio Extra, 32GB memory, 4TB, Sonoma 14.4 Apple 5K Retina Studio Monitor
Hi krs

I don't know if this helps at all, but...

In Safari, you can File > Export as PDF. This creates a PDF of as many pages as there are on that site. For example, I just created a PDF of a thread from our forums comprising 10 replies. The entire thread from top to bottom was rendered as pages in PDF.

As that any help? You could easily remove unwanted pages. But if you are looking for a way to capture just part of a page - well, I suppose you could take a screenshot of that part from the PDF. I have the feeling that this may not be what you want. Best I can do. Sorry.

Ian
 
OP
krs

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
Which OS version? Have you tried "Shift+Command+5"? Then look at the options available?

I'm on El Capitan.

I think Shift+Command+5 is only available on Mojave and later, but when I read about that it also doesn't seem to give me any options that make a screen shot of the part of the web page that is not visible on the screen - ie where one has to scroll.
 
OP
krs

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
There are some browser plugins or apps that can do this...most of them cost some $$$. I did come across a plugin for Chrome that's supposed to do this (but haven't tested it myself)...and as far as I can tell it's free:

Full Page Screen Capture - Chrome Web Store

As far as screenshots being saved as png. I use Safari most of the time...and it automatically saves screenshots as png.:)

- Nick

Thanks, but when I use Safari I can also only save a selection of what I actually see on the screen - once I select the option for a screen shot I can no longer scroll.

With the Firefox feature, I can select any portion of the web page and also scroll to pick up the rest of the web page before I click on 'download'
 
OP
krs

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
Hi krs

I don't know if this helps at all, but...

In Safari, you can File > Export as PDF. This creates a PDF of as many pages as there are on that site. For example, I just created a PDF of a thread from our forums comprising 10 replies. The entire thread from top to bottom was rendered as pages in PDF.

As that any help? You could easily remove unwanted pages. But if you are looking for a way to capture just part of a page - well, I suppose you could take a screenshot of that part from the PDF. I have the feeling that this may not be what you want. Best I can do. Sorry.

Ian

Thanks Ian, I have actually used that feature a few times.

I found it's sometimes hit and miss for two reasons:

1. Unless the web page is very simple, the pdf ends up not being a copy the way the web page is displayed - the way the pdf comes out depends on the how the various sections of the web page are generated.
I just tried that option with the web page I'm working on and instead of showing the products in a matrix of 3 across and 10 down, the pdf shows each product separately.

2. I also found in the past when using that feature, one has no control of the page breaks in the pdf.
They often work out and when they are not, they are sometimes fixable, but just yesterday I ended up with a pdf where the page break was in the middle of a line of text.
Not in the space between the text, but right in the text itself so none of the text wasactually readable.
 
OP
krs

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
One additional bit of info I just found searching on google.

The Firefox screen shot is still saved as a png file if the file is 1.9 MB or smaller - bigger than that and it's saved as a jpg.

Reason was that Firefox offered an option to upload those screen shots to one of their servers - an option I never used.
I didn't even know that option was available.

But apparently they are discontinuing that option so maybe they will bring the png option back for all sizes of screen shots

Thanks everyone for the replies and suggestions.
 

pigoo3

Well-known member
Staff member
Admin
Joined
May 20, 2008
Messages
44,210
Reaction score
1,418
Points
113
Location
U.S.
Your Mac's Specs
2017 15" MBP, 16gig ram, 1TB SSD, OS 10.15
Thanks, but when I use Safari I can also only save a selection of what I actually see on the screen - once I select the option for a screen shot I can no longer scroll.

With the Firefox feature, I can select any portion of the web page and also scroll to pick up the rest of the web page before I click on 'download'

Title of the thread = "How to take screen shot of part of webpage in png format". I believe I answered this.:) Please notice the thread title says "part of webpage"...not full web page.:)

A 2nd part of post #1 asked: "...does anyone know of an application or browser that allows one to take a selective screen shot that can be used for the whole web page including the portion that is not visible on the screen." I believe I offered a possible solution to this as well.:)

Both of these issues appeared (as written) to be separate hurdles. If the actual solution desired requires both of these hurdles be cleared with a single solution...post #1 doesn't make that clear.

- Nick

p.s. I believe the screenshot in png format solution I mentioned is not dependent on Safari (it's a macOS thing)...command + shift + 4. Thus a screenshot taken anywhere/any app...with command + shift + 4 will produce a screenshot saved in png format.:)
 

Raz0rEdge

Well-known member
Staff member
Moderator
Joined
Jul 17, 2009
Messages
15,745
Reaction score
2,071
Points
113
Location
MA
Your Mac's Specs
2022 Mac Studio M1 Max, 2023 M2 MBA
Why not take a screenshot of the visible part, then scroll, take another screenshot and then using something like GIMP, combine the two screenshots into a single screenshot?
 
OP
krs

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
Title of the thread = "How to take screen shot of part of webpage in png format". I believe I answered this.:) Please notice the thread title says "part of webpage"...not full web page.:)

Nick, I tried to keep the text in the subject line short becauseI noticed that the forum cuts off the subject line if it is too long.
That's why I started my post with:
Let me explain in a bit more detail to elaborate on the subject line.
However, I'm not sure what you are proposing to use to get a screen shot of part of the web page where that part extends past the bottom edge of the screen.

To make things clear - I want to get a screen shot in png of the centre portion of this web page - ie the part with "New Products" - three images across and 10 rows down without the frames on the left and the right.
https://modell-werkstatt.de/newproducts

As an aside, I also remember a browser that lets one select different frames on a web page, but I can't remember which one - that might work as well.

A 2nd part of post #1 asked: "...does anyone know of an application or browser that allows one to take a selective screen shot that can be used for the whole web page including the portion that is not visible on the screen." I believe I offered a possible solution to this as well.:)
I downloaded the extension for chrome but didn't get anywhere when I tried to use it.
On the website explainung that feature it says:
The simplest way to take a full page screenshot of your current browser window. Click on the extension icon (or press Alt+Shift+P), watch the extension capture each part of the page, and be transported to a new tab of your screenshot where you can download it as an image or PDF or even just drag it to your desktop.

On the Mac I tried control+shift+P, but that did nothing.
I looked for a screen shot on my desktop - there was nothing; then I did a search using FAF for something called screen shot in case the screen shot wassaved to some other folder - still nothing. Now I'm not even sure if this feature is available for Chrome on the Mac or only on Chrome for Windows.

Both of these issues appeared (as written) to be separate hurdles. If the actual solution desired requires both of these hurdles be cleared with a single solution...post #1 doesn't make that clear.

A single solution would be preferable (like in Firefox), but is not necessary.
It would just make it less time consuming since I don't always know ahead if time, before I look at a web page, if the part of the page I want to capture extends beyond the bottom of my screen and if I want the whole page or only part of the page.

- Nick

p.s. I believe the screenshot in png format solution I mentioned is not dependent on Safari (it's a macOS thing)...command + shift + 4. Thus a screenshot taken anywhere/any app...with command + shift + 4 will produce a screenshot saved in png format.:)[/QUOTE]
 
OP
krs

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
Why not take a screenshot of the visible part, then scroll, take another screenshot and then using something like GIMP, combine the two screenshots into a single screenshot?
I actually ended up doing that but it's a lot of extra work.

For the current web page I was doing, I took five screen shots and assembled them - some other web pages I had done in the past before FF changed to jpgs, I would have to take 10 or more screenshots and assemble all of those.
 

Raz0rEdge

Well-known member
Staff member
Moderator
Joined
Jul 17, 2009
Messages
15,745
Reaction score
2,071
Points
113
Location
MA
Your Mac's Specs
2022 Mac Studio M1 Max, 2023 M2 MBA
Ok, the other option. File->Print a page and you can save that to a single PDF that has all the section and then you trim as necessary. If your goal is to get a single document for a long webpage, this might be work albeit being on different pages.
 
Joined
May 21, 2012
Messages
10,702
Reaction score
1,158
Points
113
Location
Rhode Island
Your Mac's Specs
M1 Mac Studio, 11" iPad Pro 3rdGen, iPhone 13 ProMax, Watch S7, 2018 15" MBP, AirPods Pro
Do you either Affinity Designer or Photo? Either one of those would edit PDF files better. If you do the Safari Export option.
 

pigoo3

Well-known member
Staff member
Admin
Joined
May 20, 2008
Messages
44,210
Reaction score
1,418
Points
113
Location
U.S.
Your Mac's Specs
2017 15" MBP, 16gig ram, 1TB SSD, OS 10.15
To make things clear - I want to get a screen shot in png of the centre portion of this web page.

I'm not sure you're going to find a single solution to replace the command that Firefox used to have...but did away with.

The best suggestion I can make is use the 3-key combination of...command + shift + 4. This allows you to take a screenshot of the area you select visible on the display.

When you press the 3-key combo of command + shift + 4...your cursor turns into a set of crosshairs...then you click and drag over the area you want a screenshot of...then release. You will then have a screenshot of only the selected area...and it will be saved in png format (as you mentioned you wanted).

I do this all the time...and it works great.:)

- Nick
 
OP
krs

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
Ok, the other option. File->Print a page and you can save that to a single PDF that has all the section and then you trim as necessary. If your goal is to get a single document for a long webpage, this might be work albeit being on different pages.

Thanks, I also do that occasionally to get a pdf from a web page.
However, when using the 'Save as pdf" option in the print menu often gives me a pdf with images moved, truncated or text running into images like on page 3 of the current webpage I posted a link to earlier - top left in the attachment.
Not too bad in this case- often it's much worse.

Heyn pdf.jpg
 

Rod


Joined
Jun 12, 2011
Messages
9,628
Reaction score
1,831
Points
113
Location
Melbourne, Australia and Ubud, Bali, Indonesia
Your Mac's Specs
2021 M1 MacBook Pro 14" macOS 14.4.1, Mid 2010MacBook 13" iPhone 13 Pro max, iPad 6, Apple Watch SE.
I use the Full Page Screen Capture extension that Nick mentioned for full page images of this forum from time to time but I use it in the Brave browser which allows chrome extensions.
 
OP
krs

krs


Joined
Sep 16, 2008
Messages
3,555
Reaction score
610
Points
113
Location
Canada
I use the Full Page Screen Capture extension that Nick mentioned for full page images of this forum from time to time but I use it in the Brave browser which allows chrome extensions.

Do you use the key combination: control+shift+P ?

What actually happens?
In Chrome I didn't see anything nor would FAF come up with any file called 'Screen...' with today's date and current time
 

Rod


Joined
Jun 12, 2011
Messages
9,628
Reaction score
1,831
Points
113
Location
Melbourne, Australia and Ubud, Bali, Indonesia
Your Mac's Specs
2021 M1 MacBook Pro 14" macOS 14.4.1, Mid 2010MacBook 13" iPhone 13 Pro max, iPad 6, Apple Watch SE.
No, in Brave and I guessed in Chrome too there is an icon in the tool bar (looks like a camera). I press that. It shows a pacman like animation then I download the image as PDF or other.


Sent from my iPhone using Mac-Forums
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top