How To Save a Portion Of a Webpage Or Document as an Image Or PDF

You can easily save a portion of a webpage or document as a streamlined PDF or Image file. However, many people take screenshots instead, which are poor resolution. Using the Open In Preview function in the Print Dialog, you can quickly and easily convert portions of webpages or documents to smooth and scalable PDFs or even higher resolution images.

Video Transcript
In the past I've mentioned before how you can use Save as PDF to save a webpage or document, say from Numbers, and then crop it to only print a certain portion of that document or page. But here's another way to look at it. What if you just want to save a portion. You want to save it either as an image or as a PDF. Now you can do this using Screenshot functionality. A lot of people do. But I want to show you why that's not a good idea and show you the right way to do it.

So let's start with Screenshot functionality. I'm at a webpage here. I'm going to do Shift, Command, 4 so I can select a part of the image and it will automatically save it as a screenshot. So image this first paragraph here is what I want to save. Maybe I want to post it on social media to prove a point or something. Or maybe this is an airline ticket I'm viewing and I just want to save this one portion here and not the rest of the page. I do that and I end up with a file here. A screenshot file.

Now here's why I don't think this is a good idea. If you double click on this you get something that looks like exactly what you want. However, if you zoom in on it you can see it's pixelated. It's saving the pixels on the screen so you get little pixels there. If you try to print it is going to look a little blocky. If you try to zoom in on it or if you save it to social media and somebody decides to get a larger view of it they're not going to be able to. It's going to look kind of like this.

So let's look at a better way to do it. As you may have guessed this is going to use Print as PDF functionality. So I'm going to use Print and I'm going to say PDF. But I'm going to go directly to Open in Preview. Now like Safari has an export to PDF function and so does Numbers and such. This gets you in one step to Preview. In this case it's a huge document. You can see that there. You'll think the next thing I want to do is crop. I'm going to click on Markup Toolbar here. I'm going to click on the Selection and I'm going to select the first paragraph.

Now you'd think here what I want to do is crop. You can do that but you're going to keep the entire document and kind of hide everything else. Real quick and easy I'm going to Copy, Command C, then I'm going to Command N. Command N is File New from Clipboard. Command C, Command N. Now I get a little document here that only has the portion that I want. I'm going to save this one, Save it to the desktop.

Now here's the interesting thing. If I Hide that and I Hide that you can see here there's that first one and I showed you how when you zoom in it's no good. Here is the second one. The second one, when I zoom in because I'm actually saving the characters and everything there is intact, you can see it's nice and smooth. So it's going to print really nicely. This may be important if you're trying to print something like an airplane ticket or a receipt or something like that. You want to have the highest quality.

Now, when we were looking in Preview, let's do this again, let's Print, Open in Preview, we could also grab a section that we wanted. So let's grab a larger section here. Let's say I went to Command C to copy and Command N to paste. Now let's say I really do want this to be an image because I want to post this to social media. You can go and export, File Export from Preview, and you can change the format to jpeg. You even get to pick the quality and the resolution so you can adjust that. Now here's that jpeg image. I can open that up. You can see you have that same issue there where it's blocking now because it's an image. But as I said it does work really well for posting.

If I were to print, I'm sorry not print, but Export and choose jpeg and then go with a higher resolution, like 300 pixels per inch, let me replace what was there before, now let me close all of these, now I get this new image here. This new image is still pixelated but you can see the pixels are much smaller compared to the rest of the image so it will show up at a decent resolution.

So there's some really quick simple ways you can grab a portion of a webpage or portion of a Numbers document or something like that and save it as a PDF, save it as a jpeg for various uses.

Comments: 15 Responses to “How To Save a Portion Of a Webpage Or Document as an Image Or PDF”

    7/5/18 @ 7:47 am

    I often use screenshots to save things; this is so much better! Thank you, Gary.

    7/5/18 @ 8:45 am

    Could they make it more cumbersome? Also exposes Apple’s biggest failure to those who use both platforms, IOS and MacOS, no PREVIEW on iPad or iPhone (IOS).

    Jonathan M Hunter
    7/5/18 @ 9:21 am

    Saving as pdf also allows links within the document to be clickable, where the image file doesn’t.

    7/5/18 @ 10:38 am

    An outstanding tip succinctly presented! Thanks.

    Kenneth Clayton
    7/5/18 @ 12:50 pm

    In earlier versions of iMac all I had to do was zoom in on an image on a page and press shift, command, 3 and it was converted to a desired cropped screenshot. Now, shift, command ,3 gives me the entire page. Why would Apple intentionally do away with a protocol that was so simple, convenient and easy to use in exchange for a complicated, unnecessarily frustrating and time consuming option when it clearly is lacking in quality of function? If it ain’t broken don’t fix it–

    7/5/18 @ 1:57 pm

    Kenneth: It is Shift+Command+4 to save an area. You can see that and all screenshot shortcuts in System Preferences, Keyboard, Shortcuts, Screenshots. You can change them to whatever you want.
    What I am demonstrating here is something more versatile — creating scalable, dynamic PDFs and higher-resolution images. But if all you want is the lowres screenshot as before it hasn’t changed.

    7/5/18 @ 2:00 pm

    Jonathan: Great point!

    7/5/18 @ 2:02 pm

    Paul: Not sure what you mean. Not everything can be one-step. Doing specific things with versatility takes many steps so you can choose options. As for Preview on iOS, they kinda do have that, it is just built-in. The Files app lets you preview many things like Preview and that is built into Mail and Safari for many file types. Also the Markup function from Preview is built into those too.

    Jeffrey Ostermiller
    7/5/18 @ 5:22 pm

    I might have gotten it wrong, but when I tried your suggestion using a Fox News web site, the print command generated a mishmash of parts of the screen. Must be something to do with how the web page is constructed? Seems some pages are so complex the screenshot might be a better option?

    7/5/18 @ 6:44 pm

    Jeffrey: So websites can have multiple stylesheets (code that determines how they look). Sometimes a site has a stylesheet for the screen, and a different one for print. It sounds like that site is doing that, and has a very bad one for print. Unfortunately, there’s no easy way to correct that on your end.

    7/5/18 @ 10:40 pm

    When I want to save text from a webpage, I select the text, hesitate, then drag and drop the text onto TextEdit in my Dock. That is probably the only thing I use TextEdit for but it works for me.

    Ian leckie
    7/6/18 @ 4:41 am

    Thanks so much for this tip! I never knew you could do this, and it works so much better than doing a screenshot! So simple and yet so “hidden”. Keep up the good work!!

    Kathleen D
    7/9/18 @ 11:33 am

    Safari keeps crashing every time I try to print (save as pdf). Any thoughts why or how to fix? Love the tip.

    7/9/18 @ 12:06 pm

    Kathleen: With any webpage, or just one that you happen to be trying now? Try the usual things (restart Safari, log out/in, restart). Other than that, get it in front of an expert (Genius Bar) to have it checked out.

    Lee Taylor
    7/11/18 @ 9:32 pm

    Absolutely AMAZING!! This one I’ll use frequently. Works also for “emails” which is great when I get registration forms. Keep your tips coming, so we All get to be “power users”.

Leave a New Comment Related to "How To Save a Portion Of a Webpage Or Document as an Image Or PDF"




0/500 (500 character limit -- please state your comment succinctly and do not try to get around this limit by posting two comments)