# PNG, JPEG, WebP or PDF for website screenshots

> A decision flow, a comparison table and our own file-size measurements for choosing PNG, JPEG, WebP or PDF when you save a screenshot of a web page.

Comparison by Serghei Pogor, founder of CurlShot (https://curlshot.com/about/serghei-pogor). Published 13 October 2026. Page for people: https://curlshot.com/blog/png-jpeg-webp-pdf-for-screenshots

Save a website screenshot as PNG unless you have a reason not to: PNG is lossless, so text and thin lines stay exactly as the browser drew them, and it supports transparency. Use WebP when the screenshot goes on a web page and file size matters, JPEG when the page is mostly photos or the file must open in old software, and PDF when people need to select, search or print the text. In our test of a 1280 x 800 screenshot of a Wikipedia article, the PNG was 285 kB, the JPEG at quality 80 was 156 kB and the WebP at quality 80 was 102 kB.

## Key facts

- PNG is lossless and has a full alpha channel. A PNG can be up to 2,147,483,647 pixels on a side.
- JPEG is lossy and has no alpha channel, so it cannot have a transparent background. Its limit is 65,535 pixels on a side.
- WebP can be lossy or lossless and supports transparency in both. Its limit is 16,383 x 16,383 pixels, which a long full-page screenshot can exceed.
- A PDF keeps the text of the page as text, so it can be selected, searched and printed sharp at any zoom.
- In our measurement, JPEG at quality 80 changed 134 of the 384 pixels around a single 22 px letter. PNG changed none.
- In CurlShot, the format option takes png, jpeg, webp or pdf, and image_quality (1 to 100, default 80) applies to jpeg and webp.

## Which format should you pick for a website screenshot?

Ask these questions in order and stop at the first yes.

1. **Do people need to select, search or print the text?** Yes: save it as a PDF. A PDF keeps the words as text on paper-sized pages, so they can be copied, searched and printed sharp at any zoom.
2. **Does it need a see-through background or exact pixels, or will a tool compare it with another screenshot?** Yes: save it as a PNG. PNG is lossless: every pixel comes back exactly as the browser drew it, and it has a full alpha channel.
3. **Is it going on a web page where loading speed matters?** Yes: save it as a WebP. WebP gave the smallest lossy file on every page we measured, and current browsers all show it.
4. **Is the page mostly photos, or must the file open in old software?** Yes: save it as a JPEG. JPEG shrinks photos well, and every version of the major browsers shows it.

None of these? Keep PNG. PNG is the safe default for a screenshot: nothing is lost, and it can be converted to any other format later. The reverse is not true.

## Why does JPEG blur text in a screenshot?

JPEG compresses an image in blocks of 8 x 8 pixels and drops fine detail inside each block. The edge of a letter is fine detail, so the white pixels around it come back as faint grey speckle.

We measured it on one letter: an "a" in 22 px Helvetica, black on white, cut to 16 x 24 pixels (384 pixels, six JPEG blocks). Measured on 11 October 2026.

| Saved as | Pixels changed | Largest change in darkness |
| --- | --- | --- |
| PNG | 0 of 384 | 0 points |
| JPEG, quality 80 | 134 of 384 | 8 points of 100 |
| JPEG, quality 30 | 161 of 384 | 23 points of 100 |

In both JPEG files, the two blocks that hold no part of the letter stayed pure white (0 pixels changed). The damage sits only in blocks that an edge passes through. Lossy WebP has a second effect: it always stores colour in 4:2:0, one colour sample for every 2 x 2 pixels [3], so coloured text and thin coloured lines lose edge detail.

## PNG vs JPEG vs WebP vs PDF: the comparison table

|  | PNG | JPEG | WebP | PDF |
| --- | --- | --- | --- | --- |
| Compression | Lossless [1] | Lossy [2] | Lossy or lossless [2][4] | Not one image: pages that hold text, graphics and images [6] |
| Transparency | Yes, full alpha channel [1] | No alpha channel [2] | Yes, in lossy and lossless [4] | Does not apply to a printed page |
| Text sharpness | Exact: every pixel as rendered | Speckle around letters, stronger as quality drops | Lossy: softened, colour kept at half resolution (4:2:0). Lossless: exact [3] | Text stays text, sharp at any zoom |
| Selectable text | No | No | No | Yes |
| Largest size | 2,147,483,647 px a side [1][2] | 65,535 px a side [2] | 16,383 px a side [3] | Set by paper size, not pixels |
| Animation | Yes, as animated PNG (APNG) [1] | No | Yes [4] | No |
| Browser support | All versions of Chrome, Edge, Firefox, Opera and Safari [2] | All versions of Chrome, Edge, Firefox, Opera and Safari [2] | Chrome 32, Firefox 65, Edge 18, Safari 14 on macOS 11 and later; about 97% of users [2][5] | Opens in a PDF viewer or a browser tab; not an image for a web page |
| Typical use | Interfaces, text, diagrams, test baselines | Photo-heavy pages, previews, attachments | Images served on web pages | Documents to read, print or file |

A PDF made by a browser uses the print styles of the page [7], so it can look different from the page on a screen.

## How much smaller are JPEG and WebP than PNG?

Our measurement, 11 October 2026. Chromium 153 driven by Playwright, viewport 1280 x 800, device pixel ratio 1, the visible part of the page only. PNG and JPEG (quality 80) were written by the browser. Both WebP files were encoded from that PNG with libwebp 1.6.0: lossy at quality 80, and lossless. Sizes are in bytes; the percentage is the share of the PNG of the same page.

| Page | PNG | JPEG, quality 80 | WebP, quality 80 | WebP, lossless |
| --- | --- | --- | --- | --- |
| example.com (https://example.com/) | 80,723 (100%) | 59,554 (74%) | 35,374 (44%) | 26,038 (32%) |
| A Wikipedia article (https://en.wikipedia.org/wiki/Portable_Network_Graphics) | 285,177 (100%) | 155,893 (55%) | 102,110 (36%) | 116,702 (41%) |
| A Wikimedia Commons photo page (https://commons.wikimedia.org/wiki/File:Hopetoun_falls.jpg) | 910,772 (100%) | 172,813 (19%) | 136,250 (15%) | 591,622 (65%) |

- On the two text pages, lossless WebP was smaller than the JPEG, with no quality lost at all.
- On the photo page, lossless formats could not keep up: the JPEG was 19% of the PNG.
- Three pages are an example, not a benchmark. Run the same steps on your own pages.

Google publishes figures for images in general, not for screenshots: "WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index." [4]

## Which format for which job?

| Job | Format | Why |
| --- | --- | --- |
| Bug report | PNG | Small text, borders and one-pixel glitches are the evidence. A lossy format can blur the very detail being reported. |
| Archive or record | PDF, with a PNG beside it | The PDF keeps the words searchable. The PNG shows exactly how the page looked on screen. |
| Social preview | PNG or JPEG | PNG when the card is mostly text and flat colour, JPEG when it is mostly a photo. Every version of the major browsers shows both. |
| Documentation | PNG | Interface text has to stay readable when a reader zooms in. Capture at device pixel ratio 2 for sharp screens. |
| Visual testing | PNG only | A comparison tool counts changed pixels. Lossy compression changes pixels by itself, so every diff would start with noise. |
| Thumbnails | WebP, or JPEG as a fallback | A thumbnail is shrunk until small text is unreadable anyway, so the smaller file wins. Quality 70 to 80 is a good balance. |
| Email attachment | JPEG or PDF | JPEG is small and widely supported. Send a PDF when the recipient will read or print the page. |
| Printing | PDF | A PDF is laid out on a paper size with margins, and its text prints at the full resolution of the printer. |

## Glossary

- **Lossless**: Compression that gives back every pixel exactly as it went in. PNG is always lossless. WebP can be.
- **Lossy**: Compression that throws away detail the eye is least likely to miss, in exchange for a much smaller file. JPEG is always lossy. WebP can be.
- **Alpha channel**: A fourth value stored with the red, green and blue of each pixel that says how see-through the pixel is. It is what makes a transparent background possible.
- **Chroma subsampling**: Storing colour at a lower resolution than brightness. In 4:2:0, the scheme lossy WebP always uses, one colour sample covers a 2 x 2 block of pixels, which is why coloured text can get soft edges.
- **Device pixel ratio**: How many physical pixels a screen uses for one CSS pixel. At a ratio of 2, a 1280 x 800 window makes a 2560 x 1600 image, with four times the pixels.
- **Vector and raster**: A raster image is a grid of pixels and gets blocky when enlarged. Vector content is described as shapes and letters, so it stays sharp at any size. PNG, JPEG and WebP are raster. Text in a PDF is vector.

## How to choose the format in CurlShot

| Option | Values | Applies to | Note |
| --- | --- | --- | --- |
| `format` | png (default), jpeg, webp, pdf | Every request | jpg is accepted as another spelling of jpeg. WebP output is lossy. |
| `image_quality` | 1 to 100, default 80 | jpeg and webp | Has no effect on a PNG or a PDF. |
| `omit_background` | true or false, default false | png and webp | Leaves out the white behind the page. Refused with jpeg, which has no transparency. |
| `device_scale_factor` | 1 to 3, default 1 | png, jpeg and webp | The device pixel ratio. 2 doubles the width and height of the image. |

```bash
curl "https://curlshot.com/api/v1/screenshot?access_key=YOUR_ACCESS_KEY&url=https://example.com&format=webp&image_quality=80" \
  --output example.webp
```

Change only this part of the address for another result:

- Exact pixels: `format=png`
- A see-through background: `format=png&omit_background=true`
- A small preview: `format=jpeg&image_quality=70&image_width=640`
- A document to print: `format=pdf&pdf_paper_format=a4`

A WebP image cannot be longer than 16,383 pixels on a side [3]. A full-page screenshot that comes out taller than that in WebP is answered with the error `content_too_large`; use png or jpeg for very long pages. At `device_scale_factor=2` the limit is reached at 8,191 CSS pixels of page height (16,383 / 2).

Try it without code: [URL to image](https://curlshot.com/tools/url-to-image), [web page to PDF](https://curlshot.com/tools/website-to-pdf). Every option: [options reference](https://curlshot.com/docs/options).

## Questions

### What is the best format for a screenshot of a website?

PNG is the best default. It is lossless, so text, icons and thin borders come back exactly as the browser drew them, and it supports a transparent background. Choose WebP for screenshots shown on a web page, JPEG for photo-heavy pages, and PDF when the text has to be selectable or printed.

### Is PNG or JPEG better for screenshots?

PNG is better for most screenshots, because web pages are mostly text and flat colour, which lossy JPEG compression surrounds with faint speckle. JPEG is the better choice when the page is mostly photographs: in our test of a photo page at 1280 x 800, the JPEG at quality 80 was 173 kB and the PNG was 911 kB.

### Why does text look blurry in a JPEG screenshot?

JPEG compresses an image in blocks of 8 x 8 pixels and drops fine detail in each block. A sharp black-to-white edge is fine detail, so the pixels around every letter pick up faint grey speckle. The lower the quality setting, the stronger the effect.

### Can a JPEG screenshot have a transparent background?

No. JPEG has no alpha channel, so every pixel is fully opaque. Use PNG or WebP for a transparent background. In CurlShot, omit_background=true works with png and webp and is refused with jpeg.

### Is WebP good for screenshots?

Yes, when the screenshot will be shown on a web page. In our three test pages, WebP at quality 80 was 15% to 44% of the size of the PNG. Two limits matter: lossy WebP softens coloured text slightly, and a WebP image cannot be taller or wider than 16,383 pixels, so a very long full-page screenshot needs PNG or JPEG.

### When should I save a web page as a PDF and not as an image?

Save a PDF when someone will read, search, copy from or print the page. A PDF holds the words as text on paper-sized pages. Save an image when you need to show exactly how the page looked on a screen, because a PDF is laid out for paper and can look different from the screen version.

### Does a higher quality setting make a PNG sharper?

No. PNG is always lossless, so it has no quality setting to raise. In CurlShot, image_quality changes jpeg and webp files only. To get a sharper PNG, capture more pixels by setting device_scale_factor to 2.

## Sources

1. W3C, "Portable Network Graphics (PNG) Specification (Third Edition)": https://www.w3.org/TR/png-3/ (checked 11 October 2026)
2. MDN Web Docs, "Image file type and format guide": https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types (checked 11 October 2026)
3. Google for Developers, "WebP: frequently asked questions": https://developers.google.com/speed/webp/faq (checked 11 October 2026)
4. Google for Developers, "An image format for the Web (WebP)": https://developers.google.com/speed/webp (checked 11 October 2026)
5. Can I use, "WebP image format: browser support": https://caniuse.com/webp (checked 11 October 2026)
6. Library of Congress, "PDF (Portable Document Format), version 1.7 (ISO 32000-1:2008)": https://www.loc.gov/preservation/digital/formats/fdd/fdd000277.shtml (checked 11 October 2026)
7. Playwright, "Page API: screenshot and pdf": https://playwright.dev/docs/api/class-page (checked 11 October 2026)

## Go deeper

- [Turn a web address into a PNG, JPEG or WebP](https://curlshot.com/tools/url-to-image)
- [Save a web page as a PDF](https://curlshot.com/tools/website-to-pdf)
- [Save a web page as a JPG](https://curlshot.com/tools/webpage-to-jpg)
- [Make a website thumbnail](https://curlshot.com/tools/website-thumbnail)
- [High-resolution 2x and 3x screenshots](https://curlshot.com/tools/high-resolution-screenshot)
- [Every screenshot option](https://curlshot.com/docs/options)
- [PDF options: paper size and margins](https://curlshot.com/docs/pdf)

## Read next

- [Why website screenshots look wrong, and the fixes](https://curlshot.com/blog/why-website-screenshots-look-wrong.md): A field guide to 11 ways a website screenshot goes wrong, from blank lazy images to cookie banners and cut-off pages, with the cause and the fix for each.
- [Full-page screenshot on every device and browser](https://curlshot.com/blog/full-page-screenshot-every-device.md): Exact keys and menu names to screenshot a whole web page in Chrome, Firefox, Edge, Safari, iPhone, iPad and Android, checked against each vendor.
- [Social preview image sizes: the OG cheat sheet](https://curlshot.com/blog/social-preview-image-sizes.md): Open Graph image sizes for Facebook, LinkedIn, WhatsApp, iMessage, Discord, Slack and Google Discover, drawn to scale, with the tags and the fixes.