JPG and PNG split the web's image work along one fault line: JPG compresses photographs lossily; PNG preserves graphics losslessly with transparency. Pick by what the picture contains, not by habit. JPG (specified 1992) throws away detail your eye barely registers, so photos shrink hard. PNG (specified 1996) keeps every pixel exact and carries an alpha channel, so logos, screenshots, and line art stay crisp. The two have coexisted for three decades because each is the wrong tool for the other's job. In 2026, AVIF collapses the choice for web delivery — it does lossy, lossless, and alpha in one file — while JPG and PNG remain the universal masters and fallbacks.
Match the format to the pixels
The deciding question is the image's pixel character, not its subject.
- Continuous-tone (smoothly varying colour: photos, renders, gradients) → JPG.
- Discrete-tone (flat fills, hard edges, few colours, or transparency: logos, icons, charts, screenshots, pixel art) → PNG.
Why this works: JPG's Discrete Cosine Transform models smooth tonal change efficiently and chokes on sharp edges. PNG's row-filter-plus-DEFLATE pipeline thrives on repetition and flat regions and gains almost nothing from photographic noise. The content type, not the file name, predicts which codec wins. See JPG Format and PNG Format for the full pipelines.
What goes wrong with the wrong choice
Using the off-format is a measurable defect, not a matter of taste.
- JPG on graphics produces ringing — ghost halos around high-contrast edges and text — plus banding on flat fills. A screenshot or logo saved as JPG looks visibly fuzzy at 100% zoom.
- PNG on photographs produces bloat. A photo as PNG is commonly 5–20× larger than the same photo as a quality-85 JPG, because lossless compression cannot exploit per-pixel noise.
Spot-checks of production sites routinely find 10–20% of images in the wrong format. Correcting mismatches is cheaper and higher-impact than tuning quality sliders.
Transparency is the hard dividing line
JPG cannot store transparency; PNG carries a full 8-bit alpha channel. This single capability gap settles every UI-graphic case. A logo over a coloured background, a cut-out product shot, an icon with soft edges — none can be a JPG, because JPG has no alpha at all. That is why PNG owns the logo, icon, and interface-asset ecosystem. The historical cost was size: a cut-out product photo as PNG often ran 500 KB–2 MB. AVIF removes that penalty, encoding lossy colour with a full alpha channel in 50–100 KB. See AVIF vs PNG.
The size economics, with numbers
The gap runs in opposite directions depending on content.
For a photograph, JPG dominates: a 1600×900 hero photo is roughly 180 KB as quality-85 JPG versus about 2.1 MB as lossless PNG. Serving the PNG wastes over 1.9 MB for no visible gain.
For a flat-colour logo, PNG dominates: a 240×80 transparent wordmark is about 8 KB as lossless PNG, while JPG cannot encode it at all without flattening the background and adding edge artefacts.
The asymmetry is the whole point — neither format is "smaller" in the abstract. Each is smaller for its own content class. For the underlying lossy-versus-lossless trade-off, see Lossy vs Lossless Compression.
Quality: a dial versus a guarantee
JPG exposes a quality factor; PNG offers a guarantee.
- JPG quality 80–94 is visually indistinguishable from the source on typical screens; below 70, artefacts become noticeable to attentive viewers.
- PNG has no quality dial — output decodes to bit-identical pixels every time. Tools like
pngquantshrink PNGs by reducing the palette before encoding, but the PNG container itself stays lossless.
For archival masters or anything headed for further editing, PNG's guarantee beats JPG's dial, because each JPG re-save compounds loss.
Why AVIF now supersedes both for the web
The JPG-or-PNG decision exists because neither format does the other's job. AVIF does both jobs in one format, which dissolves the choice for browser delivery. The AV1 Image File Format, standardised by the Alliance for Open Media in 2019, supports lossy compression, true lossless compression, and full alpha transparency in a single container.
- For JPG content, AVIF is roughly 50% smaller than JPEG at matched visual quality. See AVIF vs JPG.
- For PNG content, AVIF keeps the alpha channel and is dramatically smaller on photographic transparency, and usually smaller even in lossless mode. See AVIF vs PNG.
- Beyond both, AVIF adds 10-bit and 12-bit colour, HDR, wide gamut, and animation — none of which JPG or PNG natively offer.
AVIF reaches roughly 94% of global users in 2026. The remaining tail is covered by serving AVIF first and falling back to JPG or PNG, so older formats become masters and safety nets rather than primary delivery:
<picture>
<source type="image/avif" srcset="/photo.avif" />
<img src="/photo.jpg" alt="…" width="1600" height="900" />
</picture>
The browser takes AVIF when it can and the original JPG or PNG otherwise. See AVIF Browser Support and AVIF Optimisation.
A migration playbook
When auditing a mixed JPG-and-PNG library, fix in this order.
- PNG photos → re-encode to AVIF (or JPG at quality 82 as a fallback master). The single largest size win.
- JPG logos, icons, and charts → re-encode to PNG or AVIF; the JPG ringing around text and lines is removed.
- PNG screenshots → keep as PNG or AVIF; if a screenshot is mostly a photo inside a UI, AVIF compresses it best.
- Transparent assets → PNG remains the universal master; AVIF is the smaller web-delivery copy.
Convert in the browser, with no upload, using these tools:
- JPG to AVIF — shrink a JPG photo library
- PNG to AVIF — shrink PNG graphics while keeping alpha
- AVIF to JPG, AVIF to PNG — convert AVIF back for distribution
FAQ
Is JPG or PNG better?
Neither — JPG is better for photographs, PNG is better for graphics and transparency. The right format depends entirely on the image's content.
Does PNG support transparency and JPG does not?
Yes — PNG carries a full 8-bit alpha channel; JPG has no transparency at all. Any image needing transparency must be PNG, AVIF, or WebP.
Is PNG always lossless?
Yes — a PNG always decodes to bit-identical pixels. Tools like pngquant reduce the palette before encoding, but the PNG container stays lossless.
Why is my PNG photo so large?
Because PNG is lossless and photographs have high per-pixel entropy. Its prediction-and-DEFLATE pipeline finds little to compress. Use JPG or AVIF instead.
Should I replace JPG and PNG with AVIF?
For browser delivery, yes — AVIF beats both on size and supports lossy, lossless, and alpha. Keep JPG and PNG as universal masters and <picture> fallbacks. See AVIF vs JPG and AVIF vs PNG.
Sources and further reading
- Image file type and format guide — MDN
- AVIF support tables — caniuse
- JPG Format — technical detail on JPG
- PNG Format — technical detail on PNG
- SVG Format — the vector alternative for sharp-edged artwork
- Lossy vs Lossless Compression — the mode-choice framework