PNG vs JPG vs WebP — A Practical Decision Tree

The format question comes up constantly and rarely gets a clear answer. Most guides hedge — “it depends” — and leave you no closer to a decision. This one doesn’t. Here’s a decision tree based on the two things that actually drive the choice: what kind of image it is, and where it’s going.

The short answer

For 90% of web use cases, the answer is WebP. If you need a fallback for very old browsers, also ship JPG for photos and PNG for everything else. That’s it for most people.

The remaining 10% is where the details matter — print output, animated images, icons, images edited repeatedly, technical diagrams with text. This guide walks through those.

The decision tree

Does the image need transparency?
├── YES
│   ├── Is the transparency binary (cutout with hard edges)?
│   │   ├── YES → PNG-8 or WebP
│   │   └── NO (soft edges, hair, glass) → PNG-24 (PNG-32 with alpha) or WebP
│   └── Is it for print or design handoff? → PNG
│
└── NO
    ├── Is it a photograph or photographic render?
    │   ├── For web → WebP (JPG fallback if needed)
    │   └── For print or archive → JPG at quality 95+, or TIFF
    │
    ├── Is it a screenshot, diagram, or UI mockup?
    │   ├── Text-heavy / high-contrast → PNG or WebP lossless
    │   └── Photo-like regions mixed in → WebP (lossy)
    │
    └── Is it animated?
        ├── Web → WebM or MP4 video (not GIF)
        └── Email → animated GIF or APNG (limited support)

Why each format exists

JPG is built for photography. It uses chroma subsampling and the discrete cosine transform to throw away data your eyes can’t see — specifically, small changes in color in areas that already have a lot of variation. This works brilliantly on photos and badly on anything else. JPG can’t do transparency, and it shows compression artifacts on sharp text and flat colors.

PNG is built for graphics. It uses lossless compression (DEFLATE), which means every pixel stays exactly the way you made it. PNG comes in three flavors:

• PNG-8: 256-color palette, 1-bit transparency. Small files, limited colors.
• PNG-24: 16.7 million colors (24-bit true color), no transparency.
• PNG-32: PNG-24 plus 8-bit alpha channel. The “PNG with transparency” people usually mean.

PNG is excellent for logos, icons, diagrams, screenshots, and any image with sharp edges or flat color regions. It’s wasteful for photographs.

WebP is designed to replace both, and mostly does. It has a lossy mode that competes with JPG (and usually beats it) and a lossless mode that competes with PNG (and usually beats it). It supports 8-bit alpha in both modes. It’s been supported in every evergreen browser since 2020.

Concrete file size comparison

Same 1600×1067 photograph:

Format	Quality	File size
PNG-24	N/A (lossless)	3.8 MB
JPG	90	280 KB
JPG	82	175 KB
WebP lossy	82	125 KB
WebP lossless	N/A	2.9 MB

Same 1200×1200 product shot on transparent background:

Format	Quality	File size
PNG-32	N/A (lossless)	420 KB
WebP lossless (with alpha)	N/A	340 KB
WebP lossy (with alpha)	82	110 KB

The takeaway: WebP lossy is dramatically smaller for photos and cutouts. Lossless WebP is modestly smaller than PNG. There’s almost no use case where PNG beats WebP on file size.

When to keep JPG

JPG remains the right choice when:

• You need maximum compatibility with legacy systems — ancient Windows installs, some printing services, some document management systems.
• You’re producing camera-original files (most cameras shoot JPG or RAW, not WebP).
• You’re distributing images to photographers who expect JPG.
• You’re using a CMS or platform that can’t handle WebP.

Converting a camera JPG to WebP for web delivery is always a good call — see JPG to WebP. Converting the other way, WebP to JPG, is useful for compatibility with tools that refuse WebP.

When to keep PNG

PNG remains the right choice when:

• The image will be edited repeatedly. Every lossy save accumulates artifacts; PNG doesn’t.
• You need the highest-fidelity archival copy, pre-compression.
• You’re producing assets for print or for design-tool handoff.
• You’re delivering to a platform that doesn’t support WebP (rare, but it happens with some email clients and enterprise document systems).
• The image is a favicon or system icon (PNG, ICO, and SVG are the supported formats for these).

For web icons shipping to modern browsers, SVG beats PNG on scalability. For raster icons at a single size, PNG and WebP are both fine.

PNG-8 vs PNG-24 vs PNG-32

A common confusion. PNG-8 uses a 256-color palette with optional 1-bit transparency. It’s surprisingly good for simple icons and flat UI art — often smaller than the same image as PNG-24 and smaller than WebP lossless for those specific content types.

PNG-24 is true-color (16.7M colors) with no transparency. It’s the format you get from most photo editors when you export a PNG without alpha.

PNG-32 is PNG-24 plus an 8-bit alpha channel — 256 levels of transparency per pixel. This is what you need for cutouts with soft edges (hair, fur, glass, any semi-transparent region).

Saving a 256-color flat icon as PNG-32 wastes space. Saving a hair cutout as PNG-8 produces jagged, dithered edges. Match the flavor to the content.

Quality settings by content type

Rough guidance, same across JPG and WebP lossy:

Content	Quality	Notes
Hero photo	85-90	Flagship imagery
Body photo	80-85	Blog posts, articles
Thumbnail	75-80	Grid and list views
Product shot	85-90	E-commerce, detail matters
Screenshot with text	90+	Text needs sharp edges
Photo with overlaid text	85-90 + check	Text fringes first

For content with a lot of text rendered into the image, switch to 4:4:4 chroma subsampling (not the default 4:2:0) or use PNG. Colored text on JPG at default settings looks noticeably worse than on PNG.

Common pitfalls

A few mistakes that come up repeatedly:

• Saving screenshots as JPG. Screenshots are graphics, not photos. JPG at any reasonable quality produces ringing around text and color fringes. Use PNG or WebP lossless.
• Saving photos as PNG. PNG is lossless, which is great for archival but produces 10× larger files than needed for delivery. Use JPG or WebP lossy for photos on the web.
• Converting a lossy JPG to PNG expecting quality improvement. Converting to a lossless format doesn’t recover detail that was already discarded. The PNG is just a big file containing the same compression artifacts.
• Using GIF for anything. GIF is a 1987 format. For photos, anything else beats it. For animation, video beats it. GIF’s only surviving niche is email clients that strip <video> tags.

The practical recommendation

For a new project in 2026:

1. Ship WebP for everything (photos, graphics, UI art).
2. Ship JPG as a fallback for photographic content in a <picture> tag if you care about <3% of traffic.
3. Ship PNG as a fallback for transparency-critical images if you care about the same edge case.
4. Keep source files in PNG for graphics and JPG quality 95+ (or TIFF) for photos. Re-encode to web format at build time, not by hand.

One more tool worth knowing: Bulk Convert handles format migration across a folder in one pass, which matters when you’re moving a legacy site to WebP. Everything runs locally in the browser, so a migration of a thousand product shots doesn’t need to touch a third-party server.

The format question isn’t complicated if you separate two decisions: “what’s the image” and “where is it going.” Answer both, and the format is usually obvious.