You export an image, upload it, and something is off. The screenshot looks fuzzy around the text. The photo is six megabytes and the form rejects it. The logo has a white box behind it where the transparency should be. Nearly every one of those problems is a format choice, not a quality setting.
Three formats cover almost everything that ends up on a web page, in a chat window or on a marketplace listing: JPEG, PNG and WebP. Once you know what each is built for, the decision takes a second, and when the file is still too heavy you can shrink it in the browser instead of re-exporting from the original app.
Start with what is inside the image
Ignore the formats and look at the picture. There are two kinds:
- Continuous tone. Photographs. Millions of subtly different colours, soft gradients, sensor noise, almost no perfectly hard edges.
- Flat and sharp. Screenshots, logos, diagrams, charts, text, line art. Few colours, large areas of one exact colour, edges a single pixel wide.
Lossy compression is brilliant at the first kind and destructive to the second. That sentence explains most format mistakes.
JPEG: photographs, and very little else
JPEG is lossy. It splits the image into blocks, converts each to frequency data, and throws away the fine detail your eye is least likely to notice. It also stores colour at lower resolution than brightness, because human vision is far more sensitive to the latter. On a photograph the result is remarkable: a file five to ten times smaller than the lossless equivalent, with no difference you can see at normal viewing size.
On flat graphics it falls apart. A screenshot saved as JPEG gets faint halos and speckles around every letter, because sharp black-on-white edges are exactly the high-frequency detail the algorithm discards. Text goes soft, thin lines go grey, and raising the quality slider never fully fixes it.
JPEG also has no transparency and no animation, and it degrades slightly every time you re-save. Open, crop, save, repeat, and the losses compound. Always go back to the original rather than re-editing an export.
PNG: sharp edges, screenshots and transparency
PNG is lossless. What you put in is exactly what comes out, pixel for pixel, however many times you re-save. It also carries an alpha channel, which is how logos and icons sit on a coloured background without a white rectangle behind them.
That makes PNG right for screenshots, interface mockups, logos, icons, charts, diagrams and anything containing text. Its compression works by finding repetition, so large flat areas of identical colour squeeze down beautifully.
The mistake is using it for photographs. Every grain of sensor noise is unique data a lossless algorithm must preserve faithfully, so a photo saved as PNG can easily be eight times the size of a visually identical JPEG. Note also that lossless does not mean unoptimised: reducing a simple graphic to a limited colour palette and stripping metadata often halves a PNG with no visible change.
WebP: smaller files, for both kinds of image
WebP refuses to pick a side. It has a lossy mode for photographs, a lossless mode for graphics, transparency in both, and animation. At comparable visual quality a lossy WebP typically lands a quarter to a third smaller than the equivalent JPEG, and lossless WebP usually beats PNG by a similar margin on flat artwork.
Support is no longer the concern it once was: every current major browser reads WebP, on desktop and mobile. What catches people out is everything that is not a browser, such as older desktop editors, print services, upload forms that whitelist only JPEG and PNG, and email clients, where support is inconsistent enough that newsletter images are safer as JPEG. The practical rule is to use WebP on a site you control and hand JPEG or PNG to any system you do not.
What "quality 80" actually does
The quality slider is not a percentage of anything. It scales how aggressively fine detail is rounded away, and the relationship is steeply non-linear. Going from 100 to 90 often halves the file for a difference nobody can detect. Going from 60 to 50 saves comparatively little and does visible damage.
Useful anchors: 75 to 85 for photographs on the web, 60 to 70 for thumbnails never viewed large, above 90 only when the image will be edited further. A WebP quality number is not the same scale as a JPEG one, so WebP at 75 often looks like JPEG at 85. And quality never travels backwards: re-saving at 95 a file once flattened at 50 just gives you a bigger file containing the same damage.
Getting under an upload limit without visible loss
Work in this order, and stop as soon as you are under the limit:
- Resize first. Dimensions dominate everything else. A 4000-pixel-wide image displayed at 800 carries sixteen times the pixels it needs, and halving width and height quarters the pixel count.
- Strip metadata. Camera EXIF data, embedded thumbnails and colour profiles take a surprising share of a small file.
- Lower quality in steps. Drop ten points at a time and check what breaks first: faces, text edges, and smooth skies, where banding shows before anything else.
- Change format last. A screenshot moved from PNG to lossless WebP, or a photo from PNG to JPEG, is often the single biggest win.
There is more on where the savings come from in compressing an image without losing quality. One warning: check whether the form limits file size, pixel dimensions or both, since passing one and failing the other produces the same unhelpful error.
Choosing a format for a profile picture
Avatars are a special case, because whatever you upload gets resized and re-encoded by the platform anyway. Your job is to give that process the cleanest input, not the largest.
Crop to a square, export slightly above the size it will display at, and pick by content: JPEG for a photograph of a face, PNG for an illustration, initials or anything with flat colour and sharp edges. Do not rely on transparency, since most platforms flatten it against a background you cannot predict, so bake in the one you want. Uploading a 5 MB original helps nothing. If you are starting from scratch rather than a photo, build a clean square avatar in the browser, and this walkthrough of making a profile picture covers cropping and framing.
FAQ
Is WebP always the better choice?
It usually wins on size, but the destination decides. For your own website, WebP with a JPEG or PNG fallback. For a file handed to a marketplace, a print shop, a newsletter or an unfamiliar upload form, stick to JPEG or PNG.
Does converting a JPEG to PNG improve its quality?
No. Detail lost during JPEG compression is gone, and converting preserves the existing artefacts losslessly in a much larger file. Convert to PNG only when you need transparency or lossless editing from that point on.
Why did my transparent image end up with a black background?
Because something in the chain flattened the alpha channel, either a conversion to JPEG, which has no transparency at all, or a platform compositing your image onto its own background. Export with the intended background already applied.
What about AVIF and HEIC?
AVIF compresses better than WebP and browser support is now broad, though editors and upload forms lag behind. HEIC is what recent iPhones shoot by default and is best converted to JPEG or WebP before uploading, since many sites reject it outright.
Pick the format by what is in the picture, then compress the file down to the size the upload form will accept before you hit send.
