PNG is lossless and JPEG is lossy. Use PNG when the image contains flat colour, hard edges, rendered text or transparency. Use JPEG when the image is a photograph. The difference in outcome is not marginal: on the same 1280 × 854 photograph, PNG produced 1274.1 KB and JPEG at quality 80 produced 67.5 KB.
The rule has one well-known exception that runs the other way, covered below.
The two formats discard different things
PNG compresses with DEFLATE, the same algorithm used in ZIP. It looks for repeated byte sequences and encodes them by reference. Every pixel that comes out is bit-for-bit identical to the pixel that went in. Nothing is approximated.
JPEG converts each 8 × 8 block of pixels into frequency coefficients, divides those coefficients by values from a quantisation table, and rounds. The rounding is permanent. What comes out approximates what went in, and the encoder chooses which detail to sacrifice based on what human vision is least likely to notice.
That difference decides everything else. DEFLATE rewards repetition, so it does well on images with large areas of identical colour and badly on images where every pixel differs from its neighbour. The DCT rewards smooth change, so it does well on photographs and badly on hard edges.
The same four images in both formats
Four images, all 1280 × 854, encoded as maximum-compression PNG and as JPEG at quality 80.
| Content | PNG | JPEG q80 | WebP q80 | Winner |
|---|---|---|---|---|
| Photograph | 1274.1 KB | 67.5 KB | 27.0 KB | JPEG by 19× |
| Random noise | 3209.1 KB | 680.7 KB | 725.5 KB | JPEG, but nothing is good |
| Flat graphic, hard edges | 14.6 KB | 15.4 KB | 4.2 KB | PNG over JPEG, WebP over both |
| Smooth gradient | 23.0 KB | 10.1 KB | 3.9 KB | JPEG by 2.3× |
Three of these rows confirm the conventional advice. The fourth contradicts it.
Photographs: JPEG by a factor of nineteen
A photograph has almost no exactly repeated byte sequences. Adjacent pixels differ slightly because of sensor noise, lighting gradients and texture, so DEFLATE finds very little to reference and the PNG ends up close to the raw size of the image data.
At 1274.1 KB against 67.5 KB, the PNG is 19 times larger for fidelity no viewer can perceive at display size. Publishing a photograph as PNG is the single most expensive mistake available in image delivery, and it is common, because screenshots and exports default to PNG.
The measured fidelity of the JPEG was 38.21 dB PSNR. Above roughly 38 dB, differences from the original are invisible in normal viewing on photographic content.
Flat graphics: PNG competitive, WebP better
A graphic built from large blocks of identical colour is what DEFLATE was designed for. A row of 160 identical pixels compresses to a few bytes.
PNG produced 14.6 KB against JPEG's 15.4 KB. PNG won on size, and it wins far more decisively on appearance: JPEG puts ringing artefacts around every hard edge, which is why text in a JPEG screenshot looks fuzzy and haloed. PNG reproduces the edge exactly.
WebP produced 4.2 KB — 71% smaller than PNG with the same visual result. For screenshots, diagrams, charts and interface captures, WebP is now the correct default, with PNG as the fallback.
Gradients: the case where PNG loses
This is the result that surprises people. A smooth gradient contains no repeated byte sequences at all — every pixel differs from the last by a small amount, so DEFLATE has nothing to reference. PNG produced 23.0 KB.
The DCT, by contrast, describes a smooth ramp with a handful of low-frequency coefficients and zeros for everything else. JPEG produced 10.1 KB at 50.82 dB PSNR, which is effectively perfect. WebP produced 3.9 KB.
So "synthetic image, therefore PNG" is wrong as a rule. The correct rule is about the structure of the content: flat regions and hard edges favour PNG; smooth variation favours JPEG, whether that variation came from a camera or from a gradient tool.
Noise: nothing works
Random noise is included to mark the boundary. PNG produced 3209.1 KB, which is slightly larger than the raw uncompressed pixel data — DEFLATE cannot compress incompressible input and pays a small container overhead for trying. JPEG produced 680.7 KB at 12.57 dB, a fidelity figure so low the image is visibly destroyed.
Real photographs never reach this extreme, but heavy film grain and high-ISO sensor noise move towards it. A grainy photograph that will not compress is not a tool failure; it is the content.
Text and screenshots
Screenshots contain rendered text, which is the hardest case for JPEG. Text is defined entirely by hard edges between two flat colours, and the DCT reconstructs a hard edge as a sum of waves, which overshoots on both sides. The overshoot is the halo you see around letters in a compressed screenshot.
Use PNG or WebP for any screenshot. If a screenshot must be JPEG because a form demands it, use quality 90 or above and 4:4:4 chroma subsampling. Full-resolution colour costs 17% to 23% more in file size but removes the coloured fringing around text that 4:2:0 produces.
Transparency
JPEG has no alpha channel. It cannot store transparency in any form. Placing a JPEG logo on a coloured background produces a white or black rectangle around it.
PNG-24 stores 8 bits of alpha per pixel, giving 256 levels of transparency and clean anti-aliased edges over any background. That capability is why PNG remains necessary despite its size.
WebP now covers the same ground more efficiently, because it supports an alpha channel alongside lossy colour. A photograph with a transparent background is expensive as PNG-24 and cheap as lossy WebP with alpha. Keep PNG as the fallback.
PNG-8 against PNG-24
PNG-8 stores up to 256 colours in a palette and one byte per pixel. PNG-24 stores 16.7 million colours and three bytes per pixel, plus an optional alpha byte.
For flat graphics with a limited palette — logos, icons, simple diagrams, most charts — PNG-8 typically produces a file roughly a third the size of PNG-24 with no visible difference. Quantising a photograph to PNG-8 produces visible banding, and a JPEG at the same size looks considerably better.
PNG-8 supports binary transparency only: each palette entry is fully opaque or fully transparent. Edges anti-aliased against a background will show a jagged fringe when placed on a different background.
What "lossless" actually guarantees
Lossless means the decoded pixel values equal the encoded pixel values. It does not mean the file preserves everything about the image, and it does not mean the file is small.
Two things commonly get lost even in a lossless format. Metadata is separate from pixel data and is discarded or preserved according to the tool, not the format. Colour profiles are also separate: if an ICC profile is dropped, the pixel values are unchanged but a colour-managed viewer will interpret them differently, so the image looks different despite being bit-identical.
The word also gets misused. A tool that reduces a photograph from 1274 KB to 400 KB and calls the result lossless has almost certainly quantised the palette or subsampled colour. Both are lossy. Check whether the pixel data actually round-trips before trusting the label.
Decision table
| Image | First choice | Fallback | Never |
|---|---|---|---|
| Photograph | WebP q80 | JPEG q80 | PNG |
| Screenshot with text | WebP q80 | PNG | JPEG below q90 |
| Logo or icon | SVG | PNG-8 | JPEG |
| Chart or diagram | SVG | PNG-8 or WebP | JPEG |
| Photograph with transparency | WebP lossy + alpha | PNG-24 | JPEG |
| Gradient or background wash | WebP q80 | JPEG q85 | PNG |
| Image to be edited again | PNG or the original raw file | JPEG q95 | JPEG below q90 |
How to decide by looking at the image
The decision needs no measurement in most cases. Three questions settle it.
Does the image need transparency? If yes, JPEG is eliminated immediately, and the choice is between WebP with alpha and PNG-24.
Does the image contain rendered text, or edges between two flat colours that must stay crisp? If yes, use PNG or WebP. JPEG places ringing artefacts along every such edge, and no quality setting removes them entirely.
Does the image come from a camera, or contain continuous tone and gradual shading? If yes, use JPEG or WebP. PNG will be several times larger for no visible benefit.
Where an image mixes both — a screenshot containing a photograph, a product shot with a text overlay — the hard-edged content usually decides it, because JPEG's failure on text is more visible than PNG's cost on photographic areas. WebP handles the mixture better than either older format.
What conversion between them costs
PNG to JPEG is a one-way operation. The conversion discards detail permanently, and converting back produces a PNG that faithfully stores a damaged image at PNG's size. The round trip gives you the worst of both: lossy quality at lossless cost.
JPEG to PNG is lossless in the strict sense — every pixel of the decoded JPEG is preserved exactly — but preserving artefacts perfectly is not a benefit. The output is typically several times larger than the JPEG it came from and looks identical, including the artefacts.
The practical rule follows. Keep the source in whichever format the source was created in, and derive published files from it. Do not treat a published file as an archive.
Animated PNG, and why it is rarely the answer
APNG extends PNG with animation and is supported by every current browser. It carries full colour and true alpha, which animated GIF cannot.
It is also lossless, which means an animated photograph or video clip becomes very large very quickly — a few seconds of footage can run to tens of megabytes. APNG suits short animations of flat artwork: loading indicators, simple icon transitions, interface demonstrations with few colours.
For anything resembling video, animated WebP or an MP4 in a <video> element is smaller by an order of magnitude. Use APNG when transparency and exact colour matter and the clip is short.
Mistakes that cost the most
- Publishing a screenshot as JPEG
- Text acquires visible haloes that no quality setting removes cleanly. Use PNG or WebP.
- Publishing a photograph as PNG
- Measured here at 19 times the size of the equivalent JPEG. This is the most expensive single error in image delivery.
- Assuming synthetic means PNG
- The gradient test contradicts it: PNG produced 23.0 KB and JPEG produced 10.1 KB at effectively perfect fidelity.
- Using PNG-24 where PNG-8 suffices
- A logo with twelve colours does not need a 16.7-million-colour palette.
- Trusting a "lossless" label
- Large reductions on a photograph usually indicate palette quantisation or chroma subsampling. Both are lossy.
How these numbers were measured
Source: one photograph at 1280 × 854, plus three synthetic images at identical dimensions — uniform random noise, a flat graphic of four colours with hard rectangular edges, and a two-axis linear gradient. All were held as lossless PNG and decoded into raw RGB as the reference.
Encoders: libvips 8.17.3 through sharp 0.34.5. PNG used compression level 9. JPEG used libjpeg-turbo at quality 80 with default 4:2:0 subsampling. WebP used libwebp 1.6.0 at quality 80. PSNR was computed across all three colour channels. Sizes are exact byte lengths converted at 1024 bytes per kilobyte.
Limits. The synthetic images were constructed to mark the boundaries of compressibility, not to represent typical content, and the noise image in particular is a worst case that does not occur in photography. A different photograph will move every number in the tables while leaving the ordering intact. The PNG-8 comparison is a convention drawn from common practice rather than a figure from this test run.