{"id":76508,"date":"2021-07-20T13:00:00","date_gmt":"2021-07-20T18:00:00","guid":{"rendered":"https:\/\/eshop.macsales.com\/blog\/?p=76508"},"modified":"2021-07-19T12:20:46","modified_gmt":"2021-07-19T17:20:46","slug":"take-a-screenshot-of-an-entire-webpage","status":"publish","type":"post","link":"https:\/\/eshop.macsales.com\/blog\/76508-take-a-screenshot-of-an-entire-webpage\/","title":{"rendered":"How to Take a Screenshot of an Entire Webpage in Safari on a Mac"},"content":{"rendered":"\n
\"macOS<\/figure><\/div>\n\n\n\n

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.<\/p>\n\n\n\n

Most of us are familiar with Shift-Command-3<\/strong> to capture the entire screen, or Shift-Command-4<\/strong> 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 \u2013 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?<\/p>\n\n\n\n

Yes, there is! But it does take a few extra steps than just executing a single keystroke combination.<\/p>\n\n\n\n

\n\n\n\n

Screenshot a Webpage<\/h2>\n\n\n\n
  1. Open Safari and go to “Safari > Preferences…<\/strong>“<\/li>
  2. Click the Advanced<\/strong> tab and toggle on “Show Develop menu in menu bar<\/strong>.”<\/li><\/ol>\n\n\n\n
    \"Safari<\/a><\/figure><\/div>\n\n\n\n
    1. Navigate to the webpage you want to capture and from the Develop<\/strong> menu, choose “Show Web Inspector<\/strong>.” Alternatively, you can hit alt-command-I (\u2325\u2318I).<\/li><\/ol>\n\n\n\n
      \"Show<\/a><\/figure><\/div>\n\n\n\n
      1. Select the Elements<\/strong> tab and right-click on the line that begins with “<html…”<\/li>
      2. Choose Capture Screenshot<\/strong><\/li><\/ol>\n\n\n\n
        \"\"<\/a><\/figure><\/div>\n\n\n\n
        1. Give it a moment to do it’s magic, and then select a name and location to save the file.<\/li><\/ol>\n\n\n\n
          \"\"<\/a><\/figure><\/div>\n\n\n\n

          All done! Well, almost…<\/p>\n\n\n\n

          \n\n\n\n

          Clean Up<\/h2>\n\n\n\n

          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:<\/p>\n\n\n\n

          \"\"<\/a><\/figure><\/div>\n\n\n\n

          Let’s fix that.<\/p>\n\n\n\n

          1. Open the file in Preview<\/strong>. If Preview is already your default application to open PNG files, you can simply double-click its icon.<\/li>
          2. Click the Show Markup Toolbar<\/strong> icon \"Preview and select the Instant Alpha<\/strong> tool.<\/li><\/ol>\n\n\n\n
            \"\"<\/a><\/figure><\/div>\n\n\n\n
            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.<\/li><\/ol>\n\n\n\n
              \"\"<\/a><\/figure><\/div>\n\n\n\n
              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.<\/li><\/ol>\n\n\n\n
                \"\"<\/a><\/figure><\/div>\n\n\n\n
                1. Hit Shift-Command-I (\u21e7\u2318I)<\/strong> to invert the selection.<\/li><\/ol>\n\n\n\n
                  \"\"<\/a><\/figure><\/div>\n\n\n\n
                  1. Hit Control-K (\u2318K)<\/strong> to crop the image to the selection.<\/li>
                  2. Now you can hit Save (\u2318S) <\/strong>and you truly are done. One cleaned up screenshot of an entire webpage.<\/li><\/ol>\n\n\n\n
                    \"\"<\/a><\/figure><\/div>\n\n\n\n

                    Congrats!<\/p>\n\n\n\n

                    \n\n\n\n