Choosing an image format feels like a technical detail until a product page takes six seconds to load, or a logo arrives with a grey box around it. The three formats most people meet on the web — JPEG, PNG and WebP — were designed for different jobs. Once you know what each one does to your pixels, the choice is usually obvious.
What a format actually decides
Every format answers three questions:
- Lossy or lossless? A lossless format reproduces every pixel exactly. A lossy format throws away information it predicts you will not notice, which is how it makes files dramatically smaller.
- Transparency? An alpha channel stores, for each pixel, how opaque it is. Without one, every pixel is solid.
- What kind of image does it compress well? Photos with smooth gradients and noise behave very differently from flat graphics with hard edges.
JPEG: the photograph specialist
JPEG dates from 1992 and is still the most widely supported image format in existence. It splits the image into 8 × 8 pixel blocks, converts each block into frequencies with a discrete cosine transform, and then rounds off the high-frequency detail more aggressively as you lower the quality setting. It also usually stores colour at lower resolution than brightness, because our eyes are less sensitive to fine colour detail.
That design is excellent for photographs, where detail is irregular and small errors hide in texture. It is poor for graphics: around sharp edges and text, the rounding produces visible “ringing” and blocky artefacts. JPEG has no transparency, so a cut-out product saved as JPEG always sits on a solid colour.
Every time you open and re-save a JPEG, the lossy step runs again. Edit from an original or a lossless copy, and export to JPEG once, at the end.
PNG: the exact copy
PNG is lossless. It predicts each pixel from its neighbours and stores the difference, then compresses those differences with the same DEFLATE algorithm used in ZIP files. When large areas are identical — a flat background, a screenshot of an interface, a logo — those differences are mostly zero and compress extremely well.
Photographs are the opposite case. Natural images have sensor noise and texture in every pixel, so there is little repetition to exploit. A photo saved as PNG is commonly several times larger than a JPEG that looks identical at normal viewing size. PNG supports full 8-bit alpha transparency, which is why it became the default for logos, icons and interface assets.
WebP: one format, both modes
WebP, introduced by Google in 2010, offers both a lossy mode (based on the VP8 video codec's intra-frame coding) and a separate lossless mode, and it supports transparency in both. Its lossy mode predicts blocks from already-decoded neighbours before encoding the remainder, which typically lets it reach similar visual quality at a smaller size than JPEG. Google's own published comparisons report lossy WebP files around 25–34% smaller than comparable JPEGs, and lossless WebP around 26% smaller than PNG; your results will vary with the image and the encoder.
All current versions of Chrome, Edge, Firefox and Safari display WebP. The remaining friction is outside the browser: some older desktop software, email clients and upload forms still reject it.
Where AVIF fits
AVIF, derived from the AV1 video codec, often compresses better still, especially at low file sizes, and supports transparency and high dynamic range. Its trade-offs are slow encoding and uneven support for creating it inside a browser canvas. It is a good choice when you control the pipeline; check that every place you upload to accepts it.
A decision path
| Image | First choice | Fallback |
|---|---|---|
| Photograph, no transparency | WebP (lossy) | JPEG |
| Product cut-out with transparent background | WebP with alpha | PNG |
| Screenshot, UI, diagram with text | PNG or lossless WebP | High-quality WebP |
| Logo or icon | SVG if you have vector artwork | PNG |
| Upload to a system that might be old | JPEG | PNG for graphics |
Transparency traps
Converting a transparent PNG to JPEG forces a decision about what goes behind the transparent pixels. If nothing is specified, browser canvases fill them with black, which is how logos end up in dark boxes. Choose a background deliberately — usually white for marketplaces, or the exact colour of the page the image will sit on.
Semi-transparent edges matter too. Anti-aliased edges of a cut-out are partially transparent; when flattened, each edge pixel is blended with the background. Flatten onto the wrong colour and a faint halo appears when the image is placed on a different background later.
Quality settings are not universal
“Quality 80” in one encoder is not the same as quality 80 in another, and the same number means different things in JPEG and WebP. Rather than memorising numbers, decide on a file-size budget for each image type — say, under 200 KB for a product gallery image — and let a tool search for the highest quality that fits. Then look at the result at 100% zoom, paying attention to skin, fabric texture and smooth gradients, which reveal compression first.
Metadata goes with the format conversion
Camera photos carry EXIF metadata: camera model, lens, exposure, timestamps and often GPS coordinates. Re-encoding an image through a browser canvas writes a new file from pixels alone, so that metadata is not carried over. That is usually a privacy benefit, especially for photos taken at home. If you need to keep copyright or colour-profile information, add it back with a dedicated metadata editor after export.
The short version
Photos: lossy WebP, or JPEG when compatibility matters. Anything with text, flat colour or sharp edges: PNG or lossless WebP. Anything that needs transparency: WebP or PNG, never JPEG. And whichever you choose, size the image to the dimensions it will actually be shown at before you worry about the format — pixel count affects file size far more than format choice does.