PNG, JPEG, WebP or PDF: which format for a website screenshot
Four formats, four different jobs. Here is a flow that picks one in four questions, a look at single pixels that shows why the choice matters for text, and file sizes we measured ourselves.
- PNG
Lossless, with transparency
Text, interfaces, anything compared pixel by pixel
- JPEG
Lossy, opens everywhere
Photo-heavy pages and small previews
- WebP
Lossy or lossless, smallest files
Screenshots shown on a web page
- PDF
Pages with real text
Reading, searching, printing, filing
Which format should you pick for a website screenshot?
To choose a screenshot format, ask four questions in order and stop at the first yes. Each one tests for something only one format does well.
Question 1
Do people need to select, search or print the text?
Yes
If yes:PDFSave 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.
NoQuestion 2
Does it need a see-through background or exact pixels, or will a tool compare it with another screenshot?
Yes
If yes:PNGSave it as a PNG
PNG is lossless: every pixel comes back exactly as the browser drew it, and it has a full alpha channel.
NoQuestion 3
Is it going on a web page where loading speed matters?
Yes
If yes:WebPSave it as a WebP
WebP gave the smallest lossy file on every page we measured, and current browsers all show it.
NoQuestion 4
Is the page mostly photos, or must the file open in old software?
Yes
If yes:JPEGSave it as a JPEG
JPEG shrinks photos well, and every version of the major browsers shows it.
No- PNG
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 blurs text because it compresses an image in blocks of 8 x 8 pixels and drops the finest detail inside each block. A photo hides that loss. The edge of a letter is nothing but fine detail, so the clean white beside it comes back as faint grey speckle.
PNG
0 of 384 pixels changed
JPEG, quality 80
134 of 384 pixels changed
JPEG, quality 30
161 of 384 pixels changed
What quality 80 changed
Shown 10 times stronger
We measured it on one letter: an “a” in 22 px Helvetica, black on white, cut to 16 x 24 pixels. At quality 80, 134 of the 384 pixels changed, by up to 8 points of darkness out of 100. At quality 30 it was 161 pixels, by up to 23 points. In the PNG, none changed.
The two blocks above the letter hold only white, and they stayed pure white in both JPEG files. The damage sits in the blocks an edge passes through, which on a web page means every line of text.
Lossy WebP softens colour too
PNG vs JPEG vs WebP vs PDF: the comparison table
PNG, JPEG and WebP are raster images with hard limits on size and features, and a PDF is a paged document. The numbers come from the format specifications and browser documentation listed under Sources.
| Property | PNG | JPEG | WebP | |
|---|---|---|---|---|
| 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 is rendered with the print styles of the page,[7] so it can look different from the same page on a screen. A PDF can contain text, images and graphics;[6] when we extracted the text from a browser-made PDF of example.com, every sentence came out as text.
How much smaller are JPEG and WebP than PNG?
At quality 80, JPEG and WebP screenshots were 15% to 74% of the size of the PNG in our test, and how much you save depends on what is on the page. Bars show each file as a share of the PNG of the same page.
example.com
A few lines of text on a flat background
- PNG81 kB 100%
- JPEG, quality 8060 kB 74%
- WebP, quality 8035 kB 44%
- WebP, losslessSmallest26 kB 32%
A Wikipedia article
Dense text, links, one small diagram
- PNG285 kB 100%
- JPEG, quality 80156 kB 55%
- WebP, quality 80Smallest102 kB 36%
- WebP, lossless117 kB 41%
A Wikimedia Commons photo page
One large photograph fills most of the window
- PNG911 kB 100%
- JPEG, quality 80173 kB 19%
- WebP, quality 80Smallest136 kB 15%
- WebP, lossless592 kB 65%
What the three pages show
- On the text pages, lossless WebP beat JPEG. For the Wikipedia article it was 41% of the PNG against 55% for the JPEG, with no pixel changed.
- On the photo page, lossless could not keep up. The JPEG was 19% of the PNG and lossless WebP was 65%.
- Lossy WebP at quality 80 was smaller than JPEG at quality 80 on all three pages.
- Three pages are an example, not a benchmark. The method is in the caption, so you can repeat it on your own pages.
“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.”
Which format for which job?
The right screenshot format depends on what happens to the file next. Here are eight common jobs, each with the format that suits it.
Bug report
PNGPNG
Small text, borders and one-pixel glitches are the evidence. A lossy format can blur the very detail being reported.
Archive or record
PDFPNGPDF, with a PNG beside it
The PDF keeps the words searchable. The PNG shows exactly how the page looked on screen.
Social preview
PNGJPEGPNG 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
PNGPNG
Interface text has to stay readable when a reader zooms in. Capture at device pixel ratio 2 for sharp screens.
Visual testing
PNGPNG only
A comparison tool counts changed pixels. Lossy compression changes pixels by itself, so every diff would start with noise.
Thumbnails
WebPJPEGWebP, 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
JPEGPDFJPEG or PDF
JPEG is small and widely supported. Send a PDF when the recipient will read or print the page.
Printing
PDFPDF
A PDF is laid out on a paper size with margins, and its text prints at the full resolution of the printer.
Going deeper on one of these? See visual regression testing, social preview image sizes and paper sizes for a web page saved as PDF.
Image format terms, in plain words
Six terms carry most of the difference between PNG, JPEG, WebP and PDF.
- 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
In CurlShot, one option named format picks PNG, JPEG, WebP or PDF, and three more control quality, transparency and sharpness. The online tools set the same options for you: URL to image and web page to PDF.
| Option | Values | Applies to |
|---|---|---|
formatjpg is accepted as another spelling of jpeg. WebP output is lossy. | png (default), jpeg, webp, pdf | Every request |
image_qualityHas no effect on a PNG or a PDF. | 1 to 100, default 80 | jpeg and webp |
omit_backgroundLeaves out the white behind the page. Refused with jpeg, which has no transparency. | true or false, default false | png and webp |
device_scale_factorThe device pixel ratio. 2 doubles the width and height of the image. | 1 to 3, default 1 | png, jpeg and webp |
The full list is in the options reference.
curl "https://curlshot.com/api/v1/screenshot?access_key=YOUR_ACCESS_KEY&url=https://example.com&format=webp&image_quality=80" \
--output example.webpChange one 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
Long pages and WebP
content_too_large, so use PNG or JPEG for very long pages. At a device pixel ratio of 2 the limit is reached at 8,191 CSS pixels of page height (16,383 / 2).Questions people ask
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). Checked .
- [2]MDN Web Docs, Image file type and format guide. Checked .
- [3]Google for Developers, WebP: frequently asked questions. Checked .
- [4]Google for Developers, An image format for the Web (WebP). Checked .
- [5]Can I use, WebP image format: browser support. Checked .
- [6]Library of Congress, PDF (Portable Document Format), version 1.7 (ISO 32000-1:2008). Checked .
- [7]Playwright, Page API: screenshot and pdf. Checked .
Read next
- Field guideWhy website screenshots look wrong, and the fixesA 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.
- How-toFull-page screenshot on every device and browserExact keys and menu names to screenshot a whole web page in Chrome, Firefox, Edge, Safari, iPhone, iPad and Android, checked against each vendor.
- Cheat sheetSocial preview image sizes: the OG cheat sheetOpen Graph image sizes for Facebook, LinkedIn, WhatsApp, iMessage, Discord, Slack and Google Discover, drawn to scale, with the tags and the fixes.