Most oversized web pages are oversized because of images, and most oversized images are in the wrong format. The choice is not really about quality in the abstract — it is about matching the compression method to what the picture actually contains.
Lossy and lossless are different tools
Lossy compression, used by JPEG, permanently discards information your eye is poor at detecting — mostly fine colour variation, which human vision perceives less precisely than brightness. Lossless compression, used by PNG, finds patterns and encodes them more efficiently, reconstructing the original exactly.
The key consequence of lossy compression is that it accumulates. Every save re-applies it, so an image edited and re-saved repeatedly degrades visibly — generation loss. Keep an original and export copies rather than editing the export.
JPEG: photographs
JPEG works by breaking the image into 8x8 blocks and discarding high-frequency detail within each. Photographs have smooth gradients and natural noise, so this is nearly invisible — a photo at 80% quality is often indistinguishable from the original at a fraction of the size.
The same mechanism fails badly on sharp edges. Text, logos, screenshots, and line art develop visible ringing around the edges, sometimes called mosquito noise. JPEG also has no transparency support at all.
PNG: anything with sharp edges or transparency
PNG is lossless and supports a full alpha channel, making it correct for logos, icons, screenshots, diagrams, and anything that will sit on a coloured background. Text stays crisp because nothing is discarded.
The cost is size. A photograph saved as PNG can be five to ten times larger than the equivalent JPEG with no visible benefit, which is one of the most common causes of a slow page.
WebP: usually the best of both
WebP supports both lossy and lossless modes plus transparency, and typically produces files 25-35% smaller than an equivalent JPEG at similar quality. Browser support is now effectively universal — every current browser handles it.
The remaining caveat is not browsers but everything else. Some older desktop software, certain email clients, and a number of print workflows still refuse WebP. If a file is going to a client or a printer rather than onto a web page, JPEG or PNG remains the safer choice.
A practical decision path
- Does it need transparency? If yes: PNG, or WebP if you control where it will be opened.
- Is it a photograph? WebP for the web, JPEG if it needs to open anywhere.
- Is it a screenshot, logo, or diagram? PNG, or lossless WebP.
- Is it a simple icon or flat illustration? Consider SVG instead — it stays sharp at any size and is often smaller than either.
One conversion trap
Converting a transparent PNG to JPEG does not preserve transparency, because JPEG has no alpha channel. The transparent areas get flattened onto a background — usually black or white depending on the tool. If your logo suddenly has a black box behind it, this is why.