X

Send us a Topic or Tip

Have a suggestion for the blog? Perhaps a topic you'd like us to write about? If so, we'd love to hear from you! Fancy yourself a writer and have a tech tip, handy computer trick, or "how to" to share? Let us know what you'd like to contribute!

Thanks for reaching out!

How to Take a Screenshot of an Entire Webpage in Safari on a Mac

macOS Big Sur Screenshot app icon

Taking screenshots of a webpage is a normal operation for many. Perhaps it’s to capture an image for a meme, graphs for a presentation, or to send that annoying error message to a disbelieving customer service rep. Whatever the reason, some of the standard Mac screenshot options may not do the trick.

Most of us are familiar with Shift-Command-3 to capture the entire screen, or Shift-Command-4 to capture a selected portion of a screen. You may even be familiar with Shift-Command-5 to capture a single window. But what if you want to take a scrolling screen capture of an entire webpage? The aforementioned tools can’t do that – they can only capture visible areas of your screen. So, is it even possible to take a screenshot that includes a portion of a webpage you would normally need to scroll to see?

Yes, there is! But it does take a few extra steps than just executing a single keystroke combination.


Screenshot a Webpage

  1. Open Safari and go to “Safari > Preferences…
  2. Click the Advanced tab and toggle on “Show Develop menu in menu bar.”
Safari preferences showing advanced tab
  1. Navigate to the webpage you want to capture and from the Develop menu, choose “Show Web Inspector.” Alternatively, you can hit alt-command-I (⌥⌘I).
Show Web Inspector in develop menu in safri
  1. Select the Elements tab and right-click on the line that begins with “<html…”
  2. Choose Capture Screenshot
  1. Give it a moment to do it’s magic, and then select a name and location to save the file.

All done! Well, almost…


Clean Up

This could just be an issue I run into, but when capturing entire pages in this manner, there is a lot of empty container buffer around the image in the PNG file. You can see this in the Quick Preview of the file:

Let’s fix that.

  1. Open the file in Preview. If Preview is already your default application to open PNG files, you can simply double-click its icon.
  2. Click the Show Markup Toolbar icon Preview Markup icon and select the Instant Alpha tool.
  1. Drag the crosshairs in the empty area around the image. You’ll see the empty space selected and highlighted in red. Drag too far, and you’ll pick up the image itself. Don’t do that, we only want to select the empty area.
  1. When you let go of the mouse button, the highlighted color will disappear and be replaced with a dotted line indicating the selected area.
  1. Hit Shift-Command-I (⇧⌘I) to invert the selection.
  1. Hit Control-K (⌘K) to crop the image to the selection.
  2. Now you can hit Save (⌘S) and you truly are done. One cleaned up screenshot of an entire webpage.

Congrats!



OWC Mark C
the authorOWC Mark C
Content Marketing Manager
A creative by nature, Mark is a writer, programmer, web developer, musician, culinary craftsman, and interpersonal artisan. He loves the outdoors because greenspace is to the soul as whitespace is to the written word. He does not like Diophantine geometry or mosquitos. Most everything else is okay. Oh yeah, he is also the managing editor of the Rocket Yard blog.
Be Sociable, Share This Post!

Leave a Reply

Comment

Name

8 Comments

  • on Catalina, the part involving Preview to crop the image was a bit different, but I figured it out. Click on the show Markup Toolbar icon, then click on Rectangular Selection, then draw a box around the bit of interest, then click on “crop” in the toolbar. Repeat if needed. Zoom as needed.

  • Tried it on the article and when I try to pen saved .png I get message that either file is corrupted or can’t open the file format.

  • I’ve often wanted to do this. However, on this very page, while the initial steps seem to work, the resulting .png is un-openable by Preview or Pixelmator Pro or Quicklook.
    (“It may be damaged or use a file format that Preview doesn’t recognize.”)

    File->Print->Save as PDF, and File->Export as PDF work as expected in Safari (full HTML-rendered page) with the added features of selectable text and extractable images in the PDFs (for those memes y’all).
    ~Tim~
    macOS Big Sur, 11.4
    Safari 14.1.1

  • I just tried that same Apple webpage with Safari 14.1.1 in OS 11.4.
    Went to File > Export as PDF… and bingo! Got a nice high-res 8.2MB PDF on my desktop instantly. Image is clean, no unexpected margins.

  • Huh. I just tried that in Mojave with the latest Safari (14.1.2), using this webpage for the test.

    I end up with a 20.6mb file ending in .PNG format, but which will not open. It’s either “damaged” or in a format that Preview can’t open.

    Very odd.

  • In most other applications, this function would be easily performed using the Print button, and then Save as PDF. It is truly unfortunate that web developers have blocked the normal Print functionality on the web.