Choose by image type. For photographs, use WebP where you can and JPEG as the universal fallback; AVIF often compresses further where it is supported. For screenshots, diagrams and anything with text or hard edges, use PNG or lossless WebP — lossy formats smear exactly the detail those images exist to show. For logos and graphics that need transparency, use PNG, lossless WebP, or SVG if the artwork is vector. JPEG cannot store transparency at all. The measured table below, from files we encoded for this guide, shows why no single format wins everywhere: the format that is smallest for a photo is the worst choice for a screenshot. Convert and compare your own files with the Image Optimizer.
What each format actually is
JPEG is the long-standing lossy photo format: excellent compatibility everywhere, no transparency, no lossless mode. Its artefacts appear as blocks in smooth areas and fringing around sharp edges.
PNG is lossless with full alpha transparency. It keeps every pixel exact, which is why screenshots and logos stay crisp — and why photographs in PNG are enormous: exactness is expensive when every pixel differs from its neighbour.
WebP offers both lossy and lossless modes plus transparency and animation in one format. Google's published compression study found lossy WebP 25–34% smaller than comparable JPEG at equivalent SSIM quality, and lossless WebP about 26% smaller than PNG on the study's images. Those are study averages across many images; your files will vary, as ours did below.
AVIF is built on the AV1 video codec and frequently beats WebP on photographs at low file sizes. Its costs are slower encoding and younger tooling support. One limit of this guide, stated plainly: our test machine's image library (Pillow 10.2) has no AVIF encoder, so AVIF appears in the decision guidance but not in our measured table. We do not quote other people's AVIF numbers as if they were our measurements.
Tested example: one photo, one screenshot, one logo, encoded by us
We generated three 1200 × 800 (logo 800 × 800) test images — a photographic-style gradient with fine noise, a flat-colour user-interface screenshot, and a flat logo with transparency — and encoded each with Pillow on our machine at the stated settings. Measured sizes in bytes:
| Encoding | Photo | Screenshot | Logo (transparent) |
|---|---|---|---|
| PNG | 2,150,971 | 4,880 | 3,758 |
| JPEG quality 85 | 227,196 | 47,446 | 20,366 |
| JPEG quality 75 | 136,552 | 41,352 | 18,527 |
| JPEG quality 60 | 85,549 | 36,051 | 16,898 |
| WebP quality 85 | 272,714 | 4,640 | 3,078 |
| WebP quality 75 | 135,676 | 4,454 | 2,742 |
| WebP lossless | 2,026,584 | 334 | 408 |
Read it by column, because each column tells a different story:
- Photo: PNG is nearly ten times the JPEG q85 file — lossless storage of photographic noise is hopeless for the web. JPEG and WebP are close; at q75 they are within a few hundred bytes of each other here, and WebP pulls ahead at other settings. Note WebP q85 came out larger than JPEG q85 on this deliberately noisy synthetic source — a useful reminder that "WebP is always smaller" is a tendency from averaged studies, not a law for every file.
- Screenshot: the ranking inverts. PNG (4,880 bytes) crushes JPEG at any quality, because flat colour compresses losslessly with ease while JPEG spends bytes describing artefacts it introduced itself — and still renders text edges worse. Lossless WebP, at 334 bytes, is smaller still.
- Logo: JPEG is both the largest and the only wrong answer visually, since flattening transparency onto a background bakes in a colour the page may not have. PNG and lossless WebP keep the alpha channel; lossless WebP is roughly one ninth the PNG size here.
A decision routine you can apply in seconds
- Is it a drawing with a vector source? Use SVG. Stop here.
- Does it contain text, line art, or flat colour regions that must stay exact? PNG, or lossless WebP if your pipeline handles it.
- Is it a photograph or a photo-like render? WebP lossy first; AVIF if your tooling supports it and you keep a fallback; JPEG when compatibility outranks size.
- Does it need transparency? That answer eliminates JPEG immediately. PNG or WebP.
- Is it animated? Prefer a real video format for anything long; animated WebP suits short, simple loops. GIF is the compatibility fallback and usually the largest file in the room.
Compatibility and delivery notes
All current major browsers display WebP, and AVIF support covers the current versions of the major browsers as well — but "browsers" is not your whole audience. Email clients, some native apps, older in-app web views and a long tail of embedded software still handle JPEG and PNG most reliably. The robust pattern is the <picture> element: offer AVIF and WebP sources first, with a JPEG or PNG <img> fallback, so each client takes the first format it understands. Never ship a format conversion without the fallback unless you have verified every client you care about — and keep your masters in a lossless format so future conversions start from full quality. Our workflow guide, How to Optimize Images for Websites, puts this format choice into the full resize–compress–serve sequence, and How to Resize and Crop Images for Different Layouts covers producing each size a <picture> element needs.
Common mistakes
- PNG for photographs. The single most expensive format error on the web, routinely a 5–10× file-size penalty for zero visible benefit.
- JPEG for screenshots and logos. Larger and uglier on flat content, and transparency is silently destroyed.
- Trusting headline percentages. Study averages (including Google's 25–34%) describe large image sets, not your file. Encode your actual image both ways and compare — it takes a minute.
- Deleting the master after converting. A lossy WebP is a delivery format. If it becomes your only copy, every future edit and re-export starts from degraded pixels.
- Assuming support from a browser chart alone. Test the places your images actually appear: feeds, emails, partner sites and apps, not just your own pages.
Frequently asked questions
Is WebP always smaller than JPEG?
No. It is smaller on average across large test sets, and clearly smaller for many images — but our own measured photo at quality 85 came out larger as WebP than as JPEG. Content and settings decide. Measure the files you actually ship.
When is AVIF worth it?
When photographs dominate your page weight, your build pipeline can encode AVIF without slowing publishing down, and you serve it through <picture> with a WebP or JPEG fallback. If any of those three fails, WebP is the pragmatic choice today.
Why do my screenshots look fuzzy as JPEG?
JPEG compression discards high-frequency detail first, and text edges are exactly that. It also spends bytes encoding the resulting blur. A lossless format is both sharper and — on flat content — smaller, as the 334-byte lossless WebP in our table shows.
Can JPEG or WebP hold a transparent logo?
JPEG cannot — it has no alpha channel. WebP can, in both lossy and lossless modes. If a logo arrives as a JPEG on a white background, that background is pixels now; ask for the PNG, SVG or design source instead of trying to remove it.
What about HEIC photos from phones?
HEIC is a storage format for phone libraries, not a web delivery format — browser support is not there. Convert HEIC to WebP or JPEG at export time, from the original file, at the size the page needs.
References
- MDN Web Docs, Image file type and format guide — https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types — Accessed 24 October 2026.
- Google for Developers, WebP Compression Study — https://developers.google.com/speed/webp/docs/webp_study — Accessed 24 October 2026.
- web.dev, Serve responsive images — https://web.dev/articles/serve-responsive-images — Accessed 24 October 2026.
- MDN Web Docs,
<picture>: The Picture element — https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture — Accessed 24 October 2026.
Related reading: JPG to PDF, PDF to JPG.