Screen Capture Entire Web Pages On Your Mac

If you need to capture an entire web page as an image, it can be difficult to do so because macOS screenshots don't allow you to capture all of the contents of a scolling window. However, you can use many different techniques to get the entire contents of a web page. Safari has a hidden feature to do this, but sometimes it won't work on certain pages. You can buy third-party pro capture software that will let you take perfect screen grabs of entire pages. You can also use a feature of the free Firefox browser, though it sometimes doesn't work perfectly.

Video Transcript: Hi, this is Gary with MacMost.com. Let me show you three different ways you can capture an entire webpage as an image.
MacMost is brought to you thanks to a great group of supporters. Go here, to MacMost.com/patreon, to read more about it. Join us and get exclusive content.
So sometimes I need to capture an entire webpage as an image. I'm not talking about what you just see on the screen but the entire thing scrolling down all the way to the bottom. There are many ways to do this. None of them are perfect. Let me show you three ways and you can figure out which is the best one for you.
Now the first option I'm going to show you is to use what you already have on your Mac. Just simply use Safari to do this. Now I know what some of you are thinking. You're thinking, wait a minute. What he's going to show us is using File, Print and then go PDF, save it as a PDF and you can convert that to an image. But this doesn't actually create a really good screen shot of the entire page. Mostly because most webpages have a separate style sheet for printing. So when you go to print it, it looks very different than what you're seeing on the screen. Now this is great if you want to save an article for reading later. You can save that as a long webpage as a PDF. Leave it as a PDF. Don't convert it to an image. Now you can open it up in just about anything and zoom in on the text and all of that. 
But if you're trying to save an image of everything that is on the webpage this is not the way to go. But there is another function in Safari that will actually capture an image. To get it you need to first go to Safari Preferences. Make sure under Advanced you have Show Develop Menu in Menu Bar. So I've got the Develop Menu here. Now this has a set of commands that will bring up extra tools. The main one being Show Web Inspector. So we'll use that. Option Command i. So we're on a page here and let's say this is a pretty simple page and it's at Apple's website, right, so it should work. 
So I'm going to use Command Option i and it brings up all these tools. Now these are tools for it's your website and you want to debug what's there for something not displaying correctly. But, the Screenshot tool is hidden in here. So you can select an element in here and you can see it highlights. There's the entire html page. There's the body. You know there's just the nab bar. I want to go over html for the entire page and Control click on it. Now I have some options. One of the those is Capture Screenshot. So I'm going to capture a screenshot of the html element. So in other words the entire page. When I do that it's going to come up with a way to Save. I'll save and here I'll get the screenshot. I'll open it up in Preview and I can see, as I zoom in, it's a really long image with a perfect representation of the entire page there. 
Great! Let's try another page here. I'll to to MacMost. Command Option i. I'll click on html. Control click on it. Capture Screenshot. Let's save that out. Nice. I get a beautiful screenshot of that site. Unfortunately it doesn't always work. For instance sometimes when I go to capture MacMost's main page I get all this extra white space around it for some reason. Let's try it with this page though and it really won't work because I'll go to html here, Control click, Capture Screenshot and all I get is an error message down here, could not capture screenshot. So it does not work all the time.
Now if you have a specific use for this, you want to capture your own webpage or some particular site and you try it and it works, great. You're done. You've gotten it for free. You didn't have to install anything. But if it's not working then you need another option. Now you may be thinking, wait a minute, isn't there a Safari extension that can do this. There used to be some but none of the ones I tried work anymore. I think as Safari has gotten more secure it's been harder for developers to have this feature and the older extensions simply have not kept up. There are Chrome extensions that can do it. So if you use Chrome as your main browser you might want to look into those.
So the next way to go is to buy professional screen capture software. This is going to cost you some money. There are various screen capture apps out there that will allow you to capture an entire webpage. Techsmith's Snagit app is one I've used in the past for various things. It has a couple of ways to capture a webpage. So, for instance, I can go to this page here and let's try to capture it since Safari couldn't do it. I can use Snagit and it will give me the option here to Capture an Entire Webpage. So I can do Selection and say Webpage and it gives me this special box here that I can enter an URL in or it works if I just drag it from Safari in here. What it's going to do, I think, is download it separately in it's own little web browser thing and capture the entire thing.
In here it has opened it up in it's own little editing tool. I can add markup for it and things like that. I can also just save it out as a png. Now I can open that in Preview, zoom in, and I get a perfect representation of this entire page. So this works really well. There's another way to do it in Snagit also. You can capture an entire scrolling window. So I can go here to Selection and say I just want to do a Region. Capture. I can focus here on the page and it gives me this little down arrow Capture Vertical Scrolling Area. If I click that it's actually going to scroll slowly through the webpage. You can see it doing it over here. It's capturing each section of it. So it really is getting a very accurate look at the webpage just as you would see it on the screen.
It took about two minutes for this very long page but I've got the same thing here and I can Save it out now and have an image. So Snagit works very well. It just costs you some money but it does give you an accurate screen capture of webpages in two different ways.
So here's the third way to do it. It's free but you do have to download software. You actually just download the Firefox browser. Now I don't typically use Firefox for much. I like it. It's a good browser but I use Safari for just about everything. I use Chrome for a couple of things that are very Goggle specific. I use Firefox for this one particular task. Firefox has a builtin screen capture for the entire webpage. If you're viewing a page like this you get the little three dots here at the top, click on that. One of the options is Take a Screenshot. You select that and now look over here. You've got Save Visible and Save Full Page. Select the Save full page and it's going to screen capture the entire thing. It does it really quickly. Look at that. I've got the entire page here. I can then hit the Download button and it will save that file out. Click here on the Download link and I can see where it's saved it here. So let's go to it. You can see it put it in my Downloads folder which is a good place for a browser to store something like that. I'll double click on it and here it is.
Now, I was prepared to tell you that this is just as good as using something like Snagit because it seems to be perfect. But, maybe not quite because I noticed here at the bottom of this very long page for some reason the references are all messed up. They're just white on white. So I'm not sure about that. Most of the time when I've used it, it's captured it perfectly. So it's a good option. Of course if you already have Firefox it's a great option for you. There's no harm in having multiple browsers on your Mac and using them for specific purposes like just having Firefox and using it for this when you need it. 
So you have three options. Use the Safari developer tools and you don't have to download anything extra. You don't have to pay for anything. But sometimes it doesn't work. The second thing is to pay for software like Snagit or some other screen capture software that will get the job done and most like do it perfectly. The third option is to use Firefox which seems to work better than Safari. It's quicker and easier to use than Safari. It does require you to download Firefox and have that as an extra browser on your Mac. Pick which option is best for you if you need to capture entire webpage as an image.

Comments: 7 Responses to “Screen Capture Entire Web Pages On Your Mac”

Kenneth Pugmire

5 years ago

I have found the best way to clip from the Web is to use Evernote Web Clipper with options to save full page, article, simplified article. Of course you need an Evernote account as this only saves to Evernote.

joe juliano

I follow you up to control click while the html is highlighted and I do not get what you show on the screen
Screen Shot 2019-08-29 at 7.41.11 PM.png
I don't know if that shot I took shows to you but I do not get the options you show when I Op Cm I control click.

Gary Rosenzweig

Joe: Do you mean at 2:23? Are you Control+Clicking on the "body" like I am? What version of Safari do you have? You can always post a screenshot to Imgur.com and link to it here.

Darrell

The iOS option "Create PDF" seems to save the web page in a very similar manner: a long image.

Darrell: As I mention in the video, saving as a PDF won't get you the same look as exporting as an image. But it is a great way to save an article to read later. It just doesn't work for those that want a pixel-perfect image of what they see in the browser. At least for most websites.

Crashcup

Great video, Gary. I used to use SnagIt every day when developing internal company web pages. It was a very useful piece of software, but even it would occasionally have trouble capturing an entire web page. Nowadays I need this functionality only occasionally, so it's good to know about the Safari and Firefox options versus shelling out $50 for SnagIt. Thank You!

Dairrell

I've been using Paparazzi for years. Easy to use, free, always updated, and just for Mac. :)

https://derailer.org/paparazzi/

Comments Closed.

Screen Capture Entire Web Pages On Your Mac

Comments: 7 Responses to “Screen Capture Entire Web Pages On Your Mac”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information