17

Is there some way in Safari, possibly via a third-party extension, to save the running contents of a Web page as a PNG image?

I understand I could print the page to PDF and use Preview to export it as a PNG image. However:

  1. I’d prefer not to create a temporary PDF file and then manually open Preview to export the PDF contents to PNG;
  2. I’d like the contents to be running instead of paginated, i.e., no page breaks;
  3. When the PDF file contains multiple pages, Preview seems to export the current page only to PNG.

I don’t have any experience with OS X automation but I suspect it could be used for this, though I want conditions 2 and 3 to be met.

I’m running Safari 5.1.1 on OS X Lion.

2
  • What if the Web page requires you to log in to view the content? I tried paparazzi in this situation and it shows me the login page. Can you pass credentials to paparazzi? – user342766 Dec 21 '15 at 13:15
  • 1
    As of October 5, 2020, the currently selected answer recommending Paparazzi is no longer necessary. See this answer below for a way to make the screenshot in Safari with extensions: apple.stackexchange.com/a/342563/7828 – Alan W. Smith Oct 5 '20 at 17:43
10

Try Paparazzi! It can save the entire website to a single png file and it lets you specify the size. Once installed, you can also launch it from within Safari by adding 'paparazzi:' to the URL. For example paparazzi:http://www.nytimes.com

1
  • 2
    This is probably the best solution for the problem. Very Mac-like UI, easy way of invoking it and lets you save the entire page length in one image (with custom width). Also, it's free (with donations welcome). – Ingmar Hupp Nov 9 '11 at 18:56
19

Not sure when it got added, but certainly in Safari 12 you can do this without any extensions. You need to enable the Safari Developer menu (tick in advanced settings). Now you can select "Show Web Inspector" in the "Develop" menu which will open a window showing the page source. Hover your cursor over the tag and right click it. Then, select the "Capture screenshot" option and save when prompted.

If you only want a specific element, just right click on the appropriate bit of html. If you are not sure, as you hover over the code the corresponding screen element is highlighted blue.

Of course, I'm now wondering if this could be apple scripted...

3
  • 4
    This is a good native solution. If you are happy with a PDF instead of a PNG it's even easier, just choose File > Export as PDF – Andrew Sep 13 '19 at 7:47
  • 1
    This is the best answer. The others are not as good as they make a fresh request and don't save the page as is, logged in, with updated content, etc. – Gabriel R. May 27 '20 at 10:06
  • PS: @Andrew I'd suggest making that a full answer, it's the perfectly solution. – Gabriel R. May 27 '20 at 10:18
5

webkit2png should be pretty close to Safari. It also works with webarchive files saved from Safari.

$ webkit2png -F http://apple.stackexchange.com/questions/30637 -o nameprefix
Fetching http://apple.stackexchange.com/questions/30637 ...
 ... done
$ webkit2png ~/Downloads/test.webarchive
Fetching ~/Downloads/test.webarchive ...
 ... done
$ ls
0testwebarchive-clipped.png 0testwebarchive-thumb.png
0testwebarchive-full.png    nameprefix-full.png

Awesome Screenshot is an extension for that should support full page screenshots. I couldn't get them to work with all pages though.

3
  • Interesting. I’d rather have a solution that could be triggered via Safari, though. – user5077 Nov 8 '11 at 22:49
  • Promising but capturing the whole page (as opposed to the current viewport) doesn’t work well. :-/ – user5077 Nov 8 '11 at 23:18
  • 1
    AwesomeScreenshot is widely considered to be malware. – Calion Oct 22 '16 at 17:06
1

Here is how to save a full web page with Safari, Chrome and Firefox without any plugin or third party software - it uses the developer tools included with each browser.

https://gist.github.com/algal/972c43b533cade4332faf4ec4458fd93

Also works when you need to scroll.

2
  • Welcome to Ask Different! We're trying to find the best answers and those answers will provide supporting info as to why they're the best. Answers should be self-contained so explain why you think the answer you provided will solve the problem or is better/more complete than the others already provided. See How to Answer on how to provide a quality answer. - From Review – fsb Apr 14 '20 at 15:06
  • This is a great reference, thanks! – Matt Sanders Apr 6 at 19:25
0

I am using LittleSnapper, which has a feature to "Snap Web Address from Safari":

The LittleSnapper menu item and browser bookmarklet both allow you to snap webpages as you visit them - no interruption required. Alongside these tools, there's even a Safari Extension that allows you to add a Snap button to the Safari toolbar. LittleSnapper also saves the HTML behind each page for future reference.

2
  • Little snapper is gone, the page has gone 404. – jorisw Mar 8 '17 at 12:52
  • @jorisw, LittleSnapper is no longer exists. Its replacement, Ember, is no longer exists too. – kukoo Mar 9 '17 at 4:26
0

To capture the whole page

With current versions of Safari (14+), this is really simple:

File > Export as PDF..

Will save a PDF version of the whole page with no page breaks and all styling intact.

Note that the other way of creating a pdf, via File > Print... does something different. It will respect any print-specific stylesheets on the page and break the PDF into print-ready pages.

To capture part of the page

If you want a sub-section of the page, @Alan's answer is the best way to do it. First make sure you have Safari's developer tools turned on, then right click the parent element you want to capture and Inspect Element:

inspect element

This will open up the Elements pane of the dev tools.

From here you can right-click on any element you want (the one you inspected will be highlighted by default) and choose Capture Screenshot:

capture screenshot

You must log in to answer this question.