Skip to content
ComparisonBy 9 min read

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.

  1. Question 1

    Do people need to select, search or print the text?

    Yes

    If yes:
    PDF

    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.

    No
  2. Question 2

    Does it need a see-through background or exact pixels, or will a tool compare it with another screenshot?

    Yes

    If yes:
    PNG

    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.

    No
  3. Question 3

    Is it going on a web page where loading speed matters?

    Yes

    If yes:
    WebP

    Save it as a WebP

    WebP gave the smallest lossy file on every page we measured, and current browsers all show it.

    No
  4. Question 4

    Is the page mostly photos, or must the file open in old software?

    Yes

    If yes:
    JPEG

    Save it as a JPEG

    JPEG shrinks photos well, and every version of the major browsers shows it.

    No
  5. 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

Measured, not drawn: one letter as Chromium rendered it, magnified so that each square is one pixel. Only darkness is shown. Measured on 11 October 2026 with JPEG files written by the browser. The dashed lines mark the 8 x 8 blocks. The fourth panel shows the difference between the first two, 10 times stronger than it is.

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

Lossy WebP always stores colour in 4:2:0: one colour sample for every 2 x 2 pixels.[3] Black text survives that well. Coloured text, link underlines and thin coloured borders lose edge detail.

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.

PropertyPNGJPEGWebPPDF
CompressionLossless[1]Lossy[2]Lossy or lossless[2][4]Not one image: pages that hold text, graphics and images[6]
TransparencyYes, full alpha channel[1]No alpha channel[2]Yes, in lossy and lossless[4]Does not apply to a printed page
Text sharpnessExact: every pixel as renderedSpeckle around letters, stronger as quality dropsLossy: softened, colour kept at half resolution (4:2:0). Lossless: exact[3]Text stays text, sharp at any zoom
Selectable textNoNoNoYes
Largest size2,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
AnimationYes, as animated PNG (APNG)[1]NoYes[4]No
Browser supportAll 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 useInterfaces, text, diagrams, test baselinesPhoto-heavy pages, previews, attachmentsImages served on web pagesDocuments 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%
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. 1 kB is 1,000 bytes. Pages: https://example.com/, https://en.wikipedia.org/wiki/Portable_Network_Graphics, https://commons.wikimedia.org/wiki/File:Hopetoun_falls.jpg.

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.”
Google for Developers, on images in general, not on screenshots.[4]

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

    PNG

    PNG

    Small text, borders and one-pixel glitches are the evidence. A lossy format can blur the very detail being reported.

  • Archive or record

    PDFPNG

    PDF, with a PNG beside it

    The PDF keeps the words searchable. The PNG shows exactly how the page looked on screen.

  • Social preview

    PNGJPEG

    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

    PNG

    Interface text has to stay readable when a reader zooms in. Capture at device pixel ratio 2 for sharp screens.

  • Visual testing

    PNG

    PNG only

    A comparison tool counts changed pixels. Lossy compression changes pixels by itself, so every diff would start with noise.

  • Thumbnails

    WebPJPEG

    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

    JPEGPDF

    JPEG or PDF

    JPEG is small and widely supported. Send a PDF when the recipient will read or print the page.

  • Printing

    PDF

    PDF

    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.

OptionValuesApplies to
formatjpg is accepted as another spelling of jpeg. WebP output is lossy.png (default), jpeg, webp, pdfEvery request
image_qualityHas no effect on a PNG or a PDF.1 to 100, default 80jpeg and webp
omit_backgroundLeaves out the white behind the page. Refused with jpeg, which has no transparency.true or false, default falsepng and webp
device_scale_factorThe device pixel ratio. 2 doubles the width and height of the image.1 to 3, default 1png, jpeg and webp

The full list is in the options reference.

A WebP screenshot of example.com
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 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

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, 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.

Screenshot any page in one step

Paste an address into CurlShot and download the screenshot. A free account gives you 100 screenshots every month. No card needed.