PNG vs JPG: When Transparency Decides for You

Most PNG vs JPG arguments get resolved in the first question, and it is not about quality or file size. It is whether any part of the image needs to be see-through. JPEG has no alpha channel and never will; PNG has a full one. If your image needs transparency, the comparison is already over, and everything else is a detail. This post works through what that actually means in practice — plus the three other situations where the answer flips. For the broader map of formats, including WebP and SVG, start with The Complete Guide to Web Image Formats.

The Alpha Channel Is the Whole Argument

A PNG stores four values per pixel: red, green, blue, and alpha. That fourth channel is 8 bits wide, so every pixel can be fully opaque, fully transparent, or any of 254 intermediate levels.

Those intermediate levels are the point. A logo's curved edge is not a hard boundary between "logo" and "nothing" — it is a band of partially transparent pixels that lets the shape blend smoothly into whatever sits behind it. That is what makes the same file look correct on a white card, a dark navbar, and a photographic hero without a visible halo.

JPEG stores three values per pixel. There is no fourth. The format was designed in the late 1980s for photographs, where every pixel is opaque by definition, and transparency was never added.

The consequence catches people out constantly: saving a transparent image as JPG does not warn you, it just flattens. Your editor composites the transparent regions onto a background colour — white by default, occasionally black — and writes an opaque rectangle. Open the result and the logo has a white box around it. The alpha data is not hidden; it was discarded at save time and no amount of re-editing brings it back. Re-export from the layered source.

The "why does my logo have a grey fringe" problem

A subtler version of the same issue: you export a PNG with transparency, but the artwork was originally composited on white. The antialiased edge pixels are semi-transparent white. Place that PNG on a dark background and you get a pale halo tracing every curve.

The fix is at export, not at conversion — the edge needs to be matted against the background it will actually sit on, or left as true premultiplied alpha from a vector source. If the logo has to work on arbitrary backgrounds, the cleanest answer is to stop using a raster format at all, which is the case made in SVG vs PNG for Icons and Logos.

When JPG Wins Decisively: Photographs

Set transparency aside and the ranking inverts hard.

Lossless compression works by finding redundancy — runs of identical colour, rows that resemble the row above — and describing it compactly. Photographs have almost none of that. Sensor noise alone means adjacent pixels in a "flat" blue sky differ by a value or two, so PNG dutifully stores every one of those differences.

Lossy compression does something entirely different: it converts the image to a frequency representation and coarsens the high-frequency detail, because human vision is far more sensitive to broad brightness changes than to fine texture. On photographic content this is devastatingly effective.

The result in practice: a photograph saved as PNG is routinely 5 to 10 times larger than the same photograph as a quality-85 JPEG, with no perceptible benefit. This is one of the most expensive and most common mistakes on the web, and it usually happens because someone's screenshot tool or export preset defaults to PNG for everything.

Useful JPEG quality range is 75–85. Below 70, blocking becomes visible in flat areas like skies. Above 90, file size climbs steeply for improvements nobody sees. If you want the actual numbers for your own image rather than a rule of thumb, the Image Compression & Format Size Estimator shows what each format and quality level produces for that specific file, computed in your browser.

When PNG Wins Decisively: Text and Hard Edges

The frequency-domain trick that hides detail in a photograph does something ugly to sharp boundaries. Coarsen those high-frequency coefficients and every hard edge sprouts faint halos — "ringing" — plus scattered noise around text that gets called mosquito artifacts.

So PNG is the right choice for:

• Screenshots, especially of software, dashboards, code or terminals. JPEG artifacts around glyphs are obvious even at high quality settings, and flat UI backgrounds compress so well losslessly that the PNG is frequently smaller than the JPEG anyway.
• Diagrams, charts and flat-colour illustrations, which are mostly large uniform regions and hard borders — the best case for lossless and the worst case for lossy.
• Line art and raster logos where no vector source exists.
• Anything that will be edited again. Lossy compression is generational: each save re-quantises data that was already quantised, so artifacts accumulate. Keep working files lossless.

Why your PNG might still be too big

If a PNG is graphics content and still heavy, check the colour depth. PNG-8 uses an indexed palette of up to 256 colours; PNG-24 stores full colour plus alpha and is what most editors export by default. A flat icon or two-tone illustration genuinely using a dozen colours can drop 60–70% by exporting as PNG-8 with no visible change at all.

The other usual culprit is pixel dimensions. A 3000px-wide diagram displayed in a 700px column is wasting bytes that no encoder can recover. Resize to the largest size actually displayed — accounting for 2x screens — before you touch compression settings.

Things That Do Not Work

Converting JPG to PNG to "restore" quality. PNG faithfully preserves whatever it is given, including every JPEG artifact, and hands you a file several times larger. Lossy loss is permanent. The only fix is the original source file.

Repeatedly editing and re-saving a JPEG. Each round strips a little more. Keep a lossless master and export JPEGs from it.

Using PNG "to be safe." Safe for graphics, expensive for photos. The default should follow the content.

Treating either as your final web delivery format. Both are now fallbacks. WebP handles both jobs and is smaller at each — roughly 25–35% under JPEG for photos and around a quarter under PNG for lossless graphics, with the same full alpha channel. Transparent graphics in particular often halve in size. The Image Format Helper converts in either direction, and the Image Compressor tunes the quality afterwards.

Both run entirely in your browser. That is worth checking before you use any image tool: most online converters upload your file to a server first, which is a genuine problem when the image is a screenshot containing customer data, an unreleased product shot, or a client's artwork under NDA. Local processing also means no upload wait, no size cap, and no daily limit.

The Short Rule

Does it need transparency? PNG — and then convert to WebP for delivery. Is it a photograph? JPG at quality 80 — and then convert to WebP for delivery. Does it contain text, UI or hard edges? PNG, always, regardless of what your screenshot tool suggests. Is it going somewhere outside your control, like an email or a print vendor? PNG or JPG, because compatibility beats efficiency once you no longer own the renderer.

Everything else is tuning. Get the transparency question and the photograph question right and you have made the decision correctly ninety per cent of the time.