PSD, PNG, JPEG, WebP, AVIF: which one, and when
Five formats that answer five different questions. A comparison on the axes that decide real projects: loss, transparency, layers, animation and browser support.
On this page
Format arguments usually go wrong because people compare compression ratios. The right question is what the file needs to survive: editing, delivery, transparency, animation, or archival.
The short version
- PSD — a working file. Layers, masks, text, paths. Never a delivery format for the web.
- PNG — lossless delivery with alpha. Best for screenshots, UI, flat art, logos.
- JPEG — lossy delivery, no alpha. Still the safety net when everything else is unsupported.
- WebP — lossy or lossless, with alpha and animation. The pragmatic default for photographs on the web.
- AVIF — the smallest files at equal quality, at the cost of slower encoding and thinner tooling.
Compared on what matters
| PSD | PNG | JPEG | WebP | AVIF | |
|---|---|---|---|---|---|
| Layers | Yes | No | No | No | No |
| Alpha transparency | Yes | Yes | No | Yes | Yes |
| Lossless option | Yes | Yes | No | Yes | Yes |
| Animation | No | Yes (APNG) | No | Yes | Yes |
| Typical photo size | Huge | Large | Small | Smaller | Smallest |
| Universal support | Editors | Yes | Yes | Yes | Mostly |
PSD is not a delivery format
A PSD holds the instructions to produce an image, not the image you ship. It carries per-layer channels, masks, adjustment parameters and often a preview composite that is bigger than the exported result. Shipping one to a client is fine when the client asked for an editable source; shipping one to a website is a mistake.
The practical rule: PSD stays in the working folder, PNG/WebP/JPEG go to the destination. The PSD internals article explains why the file is structured that way.
PNG versus WebP for flat artwork
For screenshots and UI, PNG is still excellent and lossless. WebP lossless is typically 15–25% smaller than PNG for the same pixels, and every current browser decodes it.
The trade-off is tooling: some design and documentation pipelines still handle PNG more predictably. If the images go through a build step or a CMS that re-encodes, check what it does to WebP before switching.
JPEG versus WebP versus AVIF for photographs
At matched visual quality, the ordering is consistent: AVIF is smallest, WebP is next, JPEG is largest. The gaps narrow on already-smooth images and widen on detailed textures.
What actually decides it:
- Encode time. AVIF encoding is slow enough to matter in a build pipeline; WebP is fast; JPEG is instant.
- Decode cost. Very large AVIF images cost more CPU to decode on low-end phones. For hero images, test on a mid-range device.
- Support. AVIF is widely supported now but not universally, so a fallback chain is still sensible.
Transparency is the real dividing line
If the image needs an alpha channel, JPEG is out immediately. That leaves PNG, WebP and AVIF. For a logo with sharp edges, PNG or WebP lossless. For a cut-out subject with soft edges, WebP lossy with alpha usually wins on size by a wide margin.
One trap: many tools export “transparent” PNGs that are actually transparent white over a white background, which only looks wrong on a dark page. Flatten deliberately, as covered in the export checklist.
A decision procedure
- Does it need to be edited later? → keep a PSD.
- Does it need transparency? → PNG (flat art) or WebP (photos).
- Is it a photograph destined for the web? → WebP, with AVIF if your pipeline can afford the encode.
- Is it going somewhere that only accepts JPEG? → JPEG at 82–85.
- Everything else → PNG lossless, which is never wrong for screen art.
Converting between these formats is a two-minute job in the PhotoPSD editor — open the file, flatten to what should ship, export. Current support covers PSD, PNG, JPEG and WebP; the PSD to PNG guide covers the most common conversion.
Skip the download and try it now
Open a layered PSD, edit it, export a PNG — nothing is uploaded.