# How to Take Screenshots in Safari on Mac

LazyScreenshots publishes a public search API over its indexed pages; the guide is at https://www.lazyscreenshots.com/agent-access.

Source: https://www.lazyscreenshots.com/blog/screenshot-safari-mac/
Source observed: 2026-10-08T01:32:22.562Z
Last checked: 2026-10-08T01:32:22.562+00:00
Indexed: 2026-10-08T01:36:36.387+00:00

---

# How to Take Screenshots in Safari on Mac

**May 15, 2026 · LazyScreenshots Team**

We explain Safari screenshot methods ranging from standard macOS shortcuts to full-page and element captures with Web Inspector, PDF export, responsive previews, Reader Mode, and lazy-loading fixes.

## Method 1: Keyboard shortcuts

These shortcuts work in Safari and other Mac apps:

| Shortcut | What it captures |
|---|---|
| **Cmd+Shift+3** | Entire screen, including Safari toolbar, Dock, and menu bar |
| **Cmd+Shift+4** | Selected area, chosen by dragging the crosshair |
| **Cmd+Shift+4**, then **Space** | Safari window, with or without shadow |
| **Cmd+Shift+5** | Screenshot toolbar and its capture modes |

Add **Ctrl** to any shortcut to copy the capture to the clipboard instead of saving a file. These shortcuts capture only what is visible in the Safari window; use Web Inspector for content below the fold.

## Method 2: Full-page capture with Web Inspector

Safari’s Web Inspector captures the entire webpage, including content below the scroll, as one image without an extension.

### Step 1: Enable Develop

1. Open **Safari > Settings** or press **Cmd+,**.
2. Click **Advanced**.
3. Check **Show features for web developers**.

Safari adds a **Develop** menu; this setup is required only once.

### Step 2: Open Web Inspector

Navigate to the target page, then use one of these methods:

- Press **Cmd+Option+I**.
- Choose **Develop > Show Web Inspector**.
- Right-click the page and select **Inspect Element**.

### Step 3: Capture the page

1. Select the **Elements** tab.
2. Find the `<html>` tag at the top of the DOM tree.
3. Right-click `<html>`.
4. Select **Capture Screenshot**.
5. Choose where to save the file.

Safari produces a single PNG containing the complete page. Very long pages can exceed **10,000 pixels** in height, so the resulting file may be large.

We capture Safari content and add annotations, backgrounds, and device frames in one step: [Try LazyScreenshots Free](https://www.lazyscreenshots.com/).

## Method 3: Capture a specific HTML element

1. Open Web Inspector with **Cmd+Option+I**.
2. Click the element-picker crosshair, or press **Cmd+Shift+C**.
3. Click the desired page element; Web Inspector highlights it and jumps to its HTML tag.
4. Right-click the highlighted tag in **Elements**.
5. Select **Capture Screenshot**.

Safari saves a PNG cropped to the element’s exact dimensions. Transparent backgrounds remain transparent.

Element captures are useful for design documentation, individual dashboard charts or tables, isolated UI bugs, and product screenshots without surrounding page chrome.

## Method 4: Export as PDF

For a vector-quality full-page capture:

1. Navigate to the page.
2. Choose **File > Export as PDF**.
3. Select a location and click **Save**.

PDF export uses the page’s print styles, including `@media print`, so content can be hidden or reformatted. Use Web Inspector for a pixel-accurate view of the screen.

Alternatively, choose **File > Print** or press **Cmd+P**, open the PDF menu in the lower-left of the print dialog, and choose **Save as PDF**. This provides more control over page breaks and margins.

## Method 5: Responsive Design Mode

1. Choose **Develop > Enter Responsive Design Mode**, or press **Cmd+Ctrl+R**.
2. Select iPhone SE, iPhone 15 Pro, iPad, or custom dimensions.
3. Safari re-renders the page at that viewport size.
4. Use **Cmd+Shift+4** for the visible simulated view, or Web Inspector for a full-page capture at that width.

This captures mobile and tablet views without leaving the Mac. Combining Responsive Design Mode with Web Inspector produces complete mobile screenshots for documentation or app-store assets.

## Method 6: Reader Mode

Reader Mode removes ads, navigation, and sidebars from supported articles, leaving article text and images.

1. Click the **Reader** icon in the address bar, or press **Cmd+Shift+R**.
2. Use any screenshot method on the simplified layout.

Reader Mode is useful for clean article captures and can produce smaller full-page Web Inspector images.

## Dealing with lazy-loaded content

If a full-page capture contains blank areas where images should be, the content may not have loaded before capture. Scroll from the top to the bottom first to force lazy-loaded content into the DOM, then capture with Web Inspector.

For very long pages, use the Web Inspector Console:

```javascript
// Scroll to the bottom to trigger lazy loading
window.scrollTo(0, document.body.scrollHeight);
```

Wait a few seconds for images to load, then run the capture.

## Safari screenshot tips for developers

- **Disable animations:** In Web Inspector’s Elements tab, add `* { animation: none !important; transition: none !important; }` as a CSS rule.
- **Force dark mode:** Toggle the dark/light appearance in Responsive Design Mode.
- **Hide the toolbar:** Press **Cmd+Shift+F** for full-screen Safari, then **Cmd+Shift+4+Space** to capture the window without the URL bar.
- **Capture a specific width:** Set an exact viewport width in Responsive Design Mode, such as **1200px** for a blog content area.
- **Check print styles:** Before exporting a PDF, preview with **File > Print** to see what the print stylesheet hides.

## Quick reference

| Method | What it captures | Requires |
|---|---|---|
| Cmd+Shift+3/4/5 | Visible screen area only | Nothing; built-in macOS |
| Web Inspector > Capture Screenshot (`<html>`) | Entire page, including below the fold | Develop menu enabled |
| Web Inspector > Capture Screenshot (element) | Single HTML element | Develop menu enabled |
| File > Export as PDF | Full page as vector PDF | Nothing; built-in Safari |
| Responsive Design Mode + any method | Page at a mobile/tablet viewport | Develop menu enabled |
| Reader Mode + any method | Clean article content only | Page supports Reader Mode |

## Related guides

- [How to Take Screenshots in Google Chrome on Mac](https://www.lazyscreenshots.com/blog/screenshot-google-chrome-mac/)
- [How to Screenshot a Full Web Page on Mac](https://www.lazyscreenshots.com/blog/screenshot-full-web-page-mac/)
- [How to Take a Scrolling Screenshot on Mac](https://www.lazyscreenshots.com/blog/scrolling-screenshot-mac/)
- [How to Convert Screenshots to PDF on Mac](https://www.lazyscreenshots.com/blog/screenshot-to-pdf-mac/)

## LazyScreenshots

We capture and format screenshots for Mac workflows. Explore [Features](https://www.lazyscreenshots.com/#demos), [Guides](https://www.lazyscreenshots.com/guides/), [Blog](https://www.lazyscreenshots.com/blog/), or [Buy ($29)](https://buy.stripe.com/fZu00k3Lc7I87ip7CNawo05).

---

[Read this page’s summary](https://www.lazyscreenshots.com/api/public/v1/page-tldr?url=https%3A%2F%2Fwww.lazyscreenshots.com%2Fblog%2Fscreenshot-safari-mac%2F&trace=t_4cf8b4143ec0)

## Ask a follow-up about this page

Need a more specific answer? Ask the exact question you have. It returns a fresh, cited answer from LazyScreenshots’s knowledge base. No account or API key required.

Open this URL with your own question, URL-encoded. Only q is required. No account or setup.

`GET https://www.lazyscreenshots.com/agent/faq?q={question}&trace=t_4cf8b4143ec0`

[Tool guide and examples](https://www.lazyscreenshots.com/agent-access) · [OpenAPI](https://www.lazyscreenshots.com/api/public/v1/openapi.json) · [Page TLDR form](https://www.lazyscreenshots.com/agent-tools/page-tldr?url=https%3A%2F%2Fwww.lazyscreenshots.com%2Fblog%2Fscreenshot-safari-mac%2F). Opening a form does not execute a tool.